htmlcanvas截图到白屏,
最近接手了一个小H5，主要功能大概就是照片上传和画布画板。
主要是像傻子一样记录自己食物的技巧。
1.画布画板隔空打牛！画布越往上，错位距离越小，画布越往下。
2.上传图片！白板的内容以base64的形式传输给后端工程师。图片上传的图片是路径，后端要求统一格式，需要将路径转换成base64。
3.这是谷歌的限制。前端发起请求后端可以接收，也给出返回值，但是前端在浏览器中看不到返回值。
对以上问题做一个记录。记录我的解决方案。如果不是最优的，可能就是错的。如果看到能和你的想法产生碰撞，或者暂时帮到你，那就太好了。如果没有，希望得到大家的帮助。一起加油！
先说项目概况。该项目是一个H5，这是原生的，有一个Mui框架。解决方案如下：
1.解决这个问题的方法是，如果画板的宽度高于手机屏幕的宽度和高度，就不会出现这个问题。这个问题的原因是你在页面上用的太高了，改变了画布的大小，从而改变了位置。不要设置css的高度。如果需求真的需要写，那就用定位，摆脱文档流。
2.将js图片传输到base64
方式一：Blob和FileReader 对象
实施原则：
使用xhr请求图片，并将返回的文件类型设置为Blob对象[xhr.responseType=blob]。使用FileReader对象接收blob！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title js image to base64 mode/title/head byp id= container 1 /p script getbase 64( https://z 649319834 . github . io/Learn _ Example/video _ track/webURL=窗口。URL window.webkitURLvar xhr=new XMLHttpRequest()；xhr.open(get ，imgUrl，true)；//只要拿到这个blob，问题就解决了，所以还是挺重要的。xhr.responseType= blobxhr . onload=function(){ if(this . status==200){//这时我们得到了一个blob对象var blob=this.responseconsole.log(blob ，blob)let of ilereader=new FileReader()；ofilereader . onloadend=function(e){ let base64=e . target . result；Console.log(打印出来看看吧，base64)}；ofilereader . readasdataurl(blob)；//为了在页面上显示图片，可以删除var img=document . createelement( img )；img.onload=function (e) { window。URL . revokeobjecturl(img . src)；//清除释放}；设src=window。URL . createobjecturl(blob)；img . src=src document . getelementbyid( container 1 )。appendChild(img)；} } xhr . send()；}/脚本/正文/html方式二：canvas.toDataURL()方法
实施原则：
使用canvas.toDataURL()方法需要解决图片跨域问题形象。跨原点=" "；使用了框架库的$.延期()方法！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge title js图片转base64方式/title/head body p id= container 2 /p script src= https://apps。BD img。com/libs/jquery/2。1 .1/jquery。量滴js /script script let img src= https://z 649319834。github。io/Learn _ Example/video _ track/web vtt。jpg ；//宽度、高度调用时传入具体像素值，控制大小，不传则默认图像大小函数getBase64Image(img，width，height){ var canvas=document。createelement(“canvas”)；画布宽度=宽度？宽度：img.widthcanvas.height=height？身高：img。身高；var CTX=画布。获取上下文(“2d”)；ctx.drawImage(img，0，0，canvas.width，canvas。身高)；var数据URL=canvas。toda taurl()；返回dataURL}函数getcanvasbase 64(img){ var Image=new Image()；形象。跨原点=" "；image.src=imgvar延期=$。延期();if(img){ image。onload=function(){ deferred。resolve(getbase 64 image(image))；//将base64传给完成的上传处理文档。getelementbyid(“容器2”).appendChild(图像);}延期返回。诺言()；//问题要让装载完成后再返回会话存储[ img test ]} } getcanvasbase 64(img src).然后(function(base64){ console。日志(看看结果base64)；}，函数(err){ console。日志(错误)；});/script/body/html3、前端调用接口返回200,后端有返回，但是控制台网络响应为空，没展示任何信息。
解决办法：
1、在射流研究…里面调试器，可以看到后台是否有返回数据。
2、直接console.log()，直接把返回值打印出来，查看返回的数据格式，方便前端进行数据的处理。
因为后端返回的数据较多，而且数据格式复杂，所以可能是铬的反应对数据长度或者大小进行对有控制，所以导致没显示。
另外发现一个控制台错误提示，未捕获的语法错误：无效的速记属性初始值设定项
原因数据中的一个属性冒号写成了"="
解决：把等号改成冒号；
写在最后
到此这篇关于Html5画布画图白板踩坑的文章就介绍到这了，更多相关Html5画布白板内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。