Hoje em dia, existem muitas atividades de operação de contas públicas no WeChat, e há necessidade de gerar fotos. Depois de geradas, as fotos podem ser enviadas aos amigos e divulgadas em momentos, o que favorece a promoção do produto!
1. Você pode usar o canvas para gerar imagens, mas como já existe uma biblioteca de código aberto chamada html2canvas, não fui eu que a escrevi para economizar tempo.
endereço do github:html2canvas
Pare de divagar, vamos ver as coisas primeiro! ! !
Demonstração ao vivo
/** * Obtenha a proporção de pixels com base em window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1; o valor para é um número inteiro*/ function parseValue(value) { return parseInt(value, 10); Draw canvas */ async function drawCanvas (selector) { // Obtenha o nó DOM que deseja converter const dom = document.querySelector(selector) const box = window.getComputedStyle(dom); Nó DOM const width = parseValue(box.width); Crie um elemento de tela personalizado var canvas = document.createElement('canvas'); // Defina a largura e a altura do atributo do elemento de tela para largura e altura do nó DOM * proporção de pixels canvas.width = width * canvas.height = height * scaleBy; // Defina a largura e altura do CSS da tela para a largura e altura do nó DOM canvas.style.width = `${width}px`; `${height}px`; // Obtém o pincel const context = canvas.getContext('2d'); // Amplia todo o conteúdo do desenho por proporção de pixels context.scale(scaleBy, scaleBy); = altura; return aguarda html2canvas(dom, {canvas}).then(function () { convertCanvasToImage(canvas, x,y) }) } /** * Converter imagem para formato base64*/ function convertCanvasToImage(canvas, x, y) { let image = new Image(); ) [0]; imagem.largura = x; imagem.altura = y; canvas.toDataURL(imagem/png); _body.removeChild(_container); document.body.appendChild(imagem);2. Como todos os telefones celulares de hoje têm telas de alta definição, o desfoque aparecerá se você não fizer nenhum processamento. Por que ocorre o desfoque? Isso envolve a proporção de pixels do dispositivo devicePixelRatio js fornece window.devicePixelRatio para obter a proporção de pixels do dispositivo
função DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { retornar window.devicePixelRatio } retornar 1 };Esta função DPR é obter a proporção de pixels do dispositivo. Então, o que devemos fazer depois de obter a proporção de pixels?
var canvas = document.createElement('canvas'); // Defina a largura e altura do atributo do elemento canvas para largura e altura do nó DOM * proporção de pixels canvas.width = width * scaleBy; canvas A largura e a altura do CSS são a largura e a altura do nó DOM canvas.style.width = `${width}px`; Obtenha o pincel const context = canvas.getContext('2d'); // Amplia todo o conteúdo do desenho por proporção de pixels context.scale(scaleBy, scaleBy);3. Após obter a proporção de pixels do dispositivo, multiplique canvass.width e canvas.height pela proporção de pixels do dispositivo, que neste momento é scaleBy, defina canvas.style.width e canvas.style.height para a largura e altura do; Dom. Pense nisso, por que você escreve isso? Finalmente, ao desenhar, o conteúdo desenhado é ampliado pela proporção de pixels
Por exemplo, a largura e a altura do dispositivo iPhone 6S são 375 Portanto, se você desenhar um a um, ficará desfocado em uma tela de alta definição. Basta olhar para a imagem e contar a história.
6 mais DPR = 3
4. Por fim, chame canvas.toDataURL(image/png); atribua o valor a image.src. Como as imagens não podem ser salvas no WeChat, você só pode gerar arquivos de imagem e chamar a função de toque longo do WeChat para salvar as imagens nos álbuns, como mostrado na figura:
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.