介绍 <李> & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
,,,& lt; meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
,,,& lt; title> js 图片转base64方式& lt;/title>
& lt;/head>
& lt; body>
,,,& lt; p id=癱ontainer1"祝辞& lt;/p>
,,,& lt; script>
,,,,,,,getBase64 (“https://cache.yisu.com/upload/information/20210312/296/130439.jpg")
,,,,,,,function getBase64 (imgUrl), {
,,,,,,,,,,,window.URL =, window.URL | |, window.webkitURL;
,,,,,,,,,,,var xhr =, new XMLHttpRequest ();
,,,,,,,,,,,xhr.open (“get",, imgUrl,,真的);
,,,,,,,,,,,//只要拿到这个团,问题就好解决了所以它挺重要的。
,,,,,,,,,,,xhr.responseType =,“blob";
,,,,,,,,,,,xhr.onload =, function (), {
,,,,,,,,,,,,,,,if (this.status ==, 200), {
,,,,,,,,,,,,,,,,,,,//这个时候得到了一个团对象
,,,,,,,,,,,,,,,,,,,var blob =, this.response;
,,,,,,,,,,,,,,,,,,,console.log (“blob",, blob)
,,,,,,,,,,,,,,,,,,,let oFileReader =, 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);,//,清除释放
,,,,,,,,,,,,,,,,,,,};
,,,,,,,,,,,,,,,,,,,let src =, window.URL.createObjectURL (blob);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍Html5中帆布画图白板踩坑示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和帆布画板了。
主要是记录一下自己菜到像傻子一样的技术。
1,帆布画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大。
2,图片上传!白板涂鸦的内容是以base64的形式传给后端工程师的,图片上传的图片是路径,后端要求统一格式,所以需要把路径转为base64。
3,算是谷歌的限制,前端发起请求后端可以收的到,也给了返回值,但前端在浏览器里看不到返回值。
就上面的问题做个记录。把我的解决办法记录一下,不是最优的还有可能是错误的,如果你看到能碰撞出你的想法或者暂时帮到你那就太好了,如果没有也希望得到你的帮助,一起加油!
先说一下项目的大体情况,该项目是一个H5,用的原生,框架是梅。下面是解决办法:
1,画板隔空打牛的这个问题解决办法是画板的宽高等于手机屏幕的宽高就不会出现这个问题了,之所以会出现这个问题是你在页面上使用高了,把画布的大小改变了从而位置发生了改变。不要给css定高。如果需求实在需要写,那就使用定位,脱离文档流。
2, js图片转base64
<强>方式一:Blob和FileReader对象
实现原理:
使用xhr请求图片,并设置返回的文件类型为Blob对象(xhr。responseType=癰lob"]
<李>使用FileReader对象接收blob
