Requisitos: Salvar conteúdo HTML5 como imagens
Idéia: gerar imagens base64 por meio do desenho do Canvas, pressione e segure para salvar no local
Problema: o Canvas proíbe vários domínios, o toque longo do Android WeChat não pode salvar imagens base64, as imagens extraídas pelo servidor são compactadas
2. Questões específicasPergunta 1: O Canvas é proibido em vários domínios. Se a imagem vier de outros domínios, chamar toDataURL() gerará um erro.
Solução: A tag <img> pode resolver problemas de domínio cruzado introduzindo o atributo crossorigin, ou seja, crossOrigin=Anonymous ou crossOrigin=* Observe que a configuração 'Anonymous' no ambiente Q móvel não é suportada e precisa ser definida. para '*' Se crossorigin=anonymous for usado, então Equivalente a CORS anônimo.
Problema 2: A tag <img> com conjunto crossOrigin não pode extrair imagens de vários domínios e img.onload não pode ser acionado.
Solução: Para encaminhamento em segundo plano ou proxy nigix, defina Access-Control-Allow-Origin: wx.qlogo.cn para permitir que imagens estáticas do servidor de recursos cruzem domínios. Essa configuração resolve o problema de obtenção de imagens entre domínios. (A imagem aqui é o nome de domínio do avatar do usuário wx.qlogo.cn, que apresenta problemas entre domínios)
Pergunta 3: As imagens Base64 não podem ser salvas pressionando longamente o WeChat h5 no telefone Android
Solução: Faça upload da imagem base64 desenhada pelo canvas para o servidor e, a seguir, obtenha a imagem png (jpg) do servidor. Esta abordagem é mais problemática e precisamos encontrar maneiras de melhorá-la mais tarde.
Problema 4: as imagens enviadas para o servidor estão severamente compactadas
Solução: As imagens enviadas terão diversos recursos no servidor, com diferentes níveis de compressão. Você pode obter imagens com pixels mais nítidos no diretório 'http://img10.360buyimg.com/promotepic/'.
Pergunta 5: Manter pressionado o link do código QR desenhado (//wqs.jd.com/xxx) não permite entrar diretamente na página.
Solução: Ao especificar o link do código QR a ser desenhado, deve-se adicionar http: caso contrário o código QR será reconhecido como texto.
// parte do desenho da tela: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; document.createElement(canvas), ctx = canvas.getContext(2d), //Veja a pergunta 2 para o agente nigix em segundo plano src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) ; // Para resolver o problema de que o canvas cross-domain toDataURL não pode ser lido, consulte a pergunta 1 img.crossOrigin = Anonymous; img.width; canvas.height = img.height; ctx.drawImage( img, 0, 0 ); //A imagem base64 desenhada localStorage.setItem( saveImageData, canvas.toDataURL(image/png) } img. fonte;
Parte do código para upload de fotos:
// Veja a pergunta 3 para fazer upload de imagens $.ajax({ type: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename : new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', conteúdo: base64pic, ativo: shotpic20160901 }, dataType: 'json', xhrFields: { withCredentials: true }, sucesso: function(data) { if (picdata.id == 1 && picdata.msg) { //O caminho da imagem deste caminho de prefixo é o máximo Consulte a pergunta 4 para maior clareza var imgPre = 'http://img10.360buyimg.com/promotepic/'; //Link de endereço completo para emenda de endereço de imagem var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //para fazer lógica de negócios}; ,foto); } }, erro:função(dados){ }});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.