HTML5画布海报中遇到的问题及解决方案综述

前言：最近，我们制作了一个利用画布制作海报图片的移动终端项目。由于缺乏帆布基础，我们在网上搜索了一个高级演示。但在发展过程中存在着许多问题。我们将遇到的问题和解决方案概述如下。

1、移动终端帆布项目配套全屏问题

问题描述：因为画布的宽度和高度只能设置像素值和不支持REM单元，所以它是很难实现的帆布全屏幕效果时，移动设备的屏幕分辨率是复杂的，解决的办法是通过js获取手机屏幕的clientwidth值，并将其分配到画布，从而实现全屏效果。
无功clientwidth = document.documentelement.clientwidth；
无功canvaswidth = math.floor（clientwidth）；
无功canvasheight = math.floor（clientwidth *（1334 / 750））；
$（#主），Css（'width '，canvaswidth + 'px）；
$（#主），Css（'height '，canvasheight + 'px）；
2，画布合成的画面模糊不清。

问题描述：画布生成的图像有一个模糊的问题，特别是在图片中有一个需要识别的二维代码，用户根本认不出来。

解决方案：1）的hidpi-canvas.js插件可以用来解决这个问题；

2）您还可以将画布样式的宽度和高度值设置为您想要的大小，然后分别放大画布的宽度和高度的x值。这是注意，当你在画布上画图片或字符时，相应的值也应该被x倍放大。

三.当图像合成时，有些图像会出现混乱。

问题描述：Android手机部分只能显示所需图像半当出口画布的base64的图片，并初步分析了其错误的设备像素比引起的。

解决方案是获得设备的像素比pr和决定机器的类型。我只在这里评价iPhone或Android，现在还没有问题。当合成图片时，宽度和高度的值将恢复到原来的大小。
/ / HIDPI画布放大公关时代的画布的宽度和高度属性
如果（navigator.useragent.match（ / /我的iPhone））{
canvas.width =宽度； / /恢复原来的大小
canvas.height =高度；
其他{ }
canvas.width =宽度 / / /公关；恢复原来的大小
canvas.height =身高 /公关；
}
4、iPhone手机上传图片旋转问题

问题描述：在测试时，发现iPhone手机上传的照片是旋转的，而上传的图片从互联网上就不会出现这个问题，Android是正常的。

解决方法：这个问题可以通过使用exif.js插件解决。该插件将获取拍摄时的角度信息，主要是方向属性，以便相应地操作。
var文件= $（this）{ 0 }。文件{ 0 }；
exif.getdata（文件、函数（）{（）{
EXIF.getAllTags（本）；
定位= EXIF.getTag（这个，入门）；
}）；
5、帆布无法通过跨域图片出口base64的图片

问题描述：在画布上的跨域请求，Base64图像失败。初步分析应该是由于帆布本身的安全机制造成的。

解决方案：这个bug需要前后解决。首先，后端设置图片允许跨域，然后前端设置img.crossorigin =匿名；
无功pageqrcodeimg = qrcodecanvas.todataurl（图像/图片）；
无功qrcodeimg =新的图像（）；
qrcodeimg.crossorigin =匿名；
qrcodeimg.src = pageqrcodeimg；
QrcodeImg。指针函数（）{
绘制图片
}
6，当画布画画时，会有一个白色的屏幕。

问题描述：当画布绘制图片时，偶尔会出现白色屏幕。初步分析是没有读取图片并执行绘图操作。

解决方法是添加onload函数的img，然后画面读然后绘图操作执行。
QrcodeImg。指针函数（）{
绘制图片
}
7。微信浏览器不能用图片保存

问题描述：由帆布图片无法保存或在微信浏览器认可，和一些Android的图片出现。iPhone是正常的。初步分析认为，图像质量太大。

解决方案：画面的质量被压缩在Base64图片出口。
VaR myCanvas = document.getelementbyid（主要）；
VaR的形象= mycanvas.todataurl（图像/ JPEG
后记：目前遇到的问题基本相同，后期还有哪些问题有待更新。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。