Recentemente, eu fiz um item móvel com fotos sintéticas de tela. O método resume como seguinte:
1. Projeto de adaptação ao projeto de tela móvel -Problema de tela cheiaDescrição do problema: Como a largura e a altura da tela podem definir apenas valores de PX e não suportar unidades REM, é difícil alcançar o efeito da tela coberta com telas completas quando a resolução da tela do dispositivo móvel é complicada. Solução: Obtenha o valor da largura do cliente da tela do telefone celular através do JS e forneça ao Canvas para alcançar o efeito de adaptar a tela inteira;
Var ClientWidth = Document.DocumentElement.ClientWidth; px ');2. A imagem da síntese de tela parece um fenômeno de desfoque
Descrição do problema: Há um problema vago com as imagens geradas pela tela, especialmente se houver códigos QR na figura, que precisam ser reconhecidos, os usuários não podem reconhecê -la;
Solução: 1) Você pode citar o plug-in Hidpi-canvas.js para resolver esse problema;
2) Você também pode definir os valores de largura e altura no estilo da tela para definir o tamanho desejado e, em seguida, amplie o valor da largura e da altura da tela, respectivamente.
3. Quando as imagens sintéticas são sintéticas, algumas imagens de modelo são caóticasDescrição do problema: Quando alguns telefones Android exportam a imagem base64 da tela, eles só podem exibir metade da figura do efeito do efeito.
Solução: Obtenha a proporção de pixels do equipamento, julgue o modelo. tamanho original.
// hidpi-canvas Aumente os atributos de largura e altura da tela.4. O problema de rotação da imagem do telefone celular do iPhone
Descrição do problema: Durante o teste, verificou -se que o telefone celular do iPhone enviou fotos da rotação e a imagem enviada da Internet não ocorrerá e o Android é normal.
Solução: esse problema pode ser resolvido usando o plugue Exif.js.
var arquivo = $ (this) [0] .Files [0]; ) ;;5. Canvas desenha figuras cruzadas e não pode exportar fotos base64
Descrição do problema: Quando há imagens de solicitações de domínio cruzado na tela, a imagem da base64 falha.
Solução: esse bug precisa ser resolvido com o traseiro e o traseiro -Primeiro.
VAR PageQRCodeImg = qrcodecanvas.todaurl ('imagem/jpg'); 6. A tela branca aparecerá ao desenhar figuras de telaDescrição do problema: A situação da tela branca ocasionalmente aparece quando a tela desenha uma figura.
Solução: Adicione a função Onload ao IMG e, em seguida, execute a operação de desenho depois de ler a imagem.
qrcodeimg.onload = function () {// desenhe uma figura} 7, navegador WeChat, pressione a imagem há muito tempo, não pode ser salvoDescrição do problema: a imagem gerada pela tela não pode ser salva ou reconhecida o código QR no navegador WeChat.
Solução: Compressa a qualidade da imagem ao exportar a imagem base64.
var mycanvas = document.getElementById (principal);
PostScript: Os problemas atuais encontrados são basicamente estes.
O acima é todo o conteúdo deste artigo.