Canvas implementa código de muestra para guardar imágenes localmente

Requisitos: guardar contenido HTML5 como imágenes

Idea: genere imágenes base64 a través del dibujo de Canvas, mantenga presionado para guardar en local

Problema: Canvas prohíbe el dominio cruzado, la pulsación larga de Android WeChat no puede guardar imágenes base64, las imágenes extraídas por el servidor están comprimidas

Pregunta 1: Canvas tiene prohibido el uso entre dominios. Si la imagen proviene de otros dominios, llamar a toDataURL() generará un error.

Solución: la etiqueta <img> puede resolver problemas entre dominios al introducir el atributo crossorigin, es decir, crossOrigin=Anonymous o crossOrigin=*. Tenga en cuenta que la configuración 'Anónimo' en el entorno Q móvil no es compatible y debe configurarse. a '*' Si se usa crossorigin=anonymous, entonces Equivale a CORS anónimo.

Problema 2: la etiqueta <img> con crossOrigin configurado no puede desplegar imágenes entre dominios y img.onload no se puede activar.

Solución: para reenvío en segundo plano o proxy nigix, configure Access-Control-Allow-Origin: wx.qlogo.cn para permitir que las imágenes del servidor de recursos estáticos crucen dominios. Esta configuración resuelve el problema de obtener imágenes entre dominios. (La imagen aquí es el nombre de dominio del avatar del usuario wx.qlogo.cn, que tiene problemas entre dominios)

Pregunta 3: Las imágenes Base64 no se pueden guardar presionando prolongadamente WeChat h5 en un teléfono Android

Solución: cargue la imagen base64 dibujada por lienzo en el servidor y luego obtenga la imagen png (jpg) del servidor. Este enfoque es más problemático y necesitamos encontrar formas de mejorarlo más adelante.

Problema 4: las imágenes cargadas en el servidor están muy comprimidas

Solución: Las imágenes cargadas tendrán varios recursos en el servidor, con diferentes niveles de compresión. Puede obtener imágenes con píxeles más claros en el directorio 'http://img10.360buyimg.com/promotepic/'.

Pregunta 5: Mantenga presionado el enlace del código QR dibujado (//wqs.jd.com/xxx) para ingresar directamente a la página.

Solución: al especificar el enlace del código QR que se dibujará, debe agregar http: de lo contrario, el código QR se reconocerá como texto.

 // parte del código del dibujo del lienzo: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; document.createElement(canvas), ctx = canvas.getContext(2d), //Consulte la pregunta 2 para conocer el fondo del agente nigix src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) / /Para resolver el problema de que el lienzo entre dominios toDataURL no se puede leer, consulte la pregunta 1 img.crossOrigin = Anonymous //Precarga de recursos de imagen img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage( img, 0, 0 ); //La imagen base64 dibujada localStorage.setItem( saveImageData, canvas.toDataURL(image/png) } img. src;

Parte del código para subir imágenes:

 // Consulte la pregunta 3 para cargar imágenes $.ajax({ type: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename : nueva Fecha().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', contenido: base64pic, activo: shotpic20160901 }, tipo de datos: 'json', xhrFields: { withCredentials: true }, éxito: función(datos) { if (picdata.id == 1 && picdata.msg) { //La ruta de la imagen de esta ruta de prefijo es la mayoría Consulte la pregunta 4 para mayor claridad var imgPre = 'http://img10.360buyimg.com/promotepic/'; // Enlace de dirección completa para empalme de direcciones de imágenes var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //para hacer lógica de negocios} $(#cardImg).attr(src ,foto); } }, error:función(datos){ }});

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.