Html5 canvas画图白板踩坑

日期:2021-02-22 类型:科技新闻 

关键词:在线小程序开发,微信小程序怎么做店铺,小程序logo设计,小程序平台,小程序码生成

近期接手了1个小型的H5,最关键的作用大约便是照相提交和canvas画板了。

关键是纪录1下自身菜到像二愣子1样的技术性。

1、canvas画板隔空打牛!画布越往上一部分移位间距越小,越往下间距越大。

2、照片提交!白板涂鸦的內容是以base64的方式发送给后端开发工程项目师的,照片提交的照片是相对路径,后端开发规定统1文件格式,因此必须把相对路径变为base64。

3、算是谷歌的限定,前端开发进行恳求后端开发能够收到,也给了回到值,但前端开发在访问器里看不见回到值。

就上面的难题做个纪录。把我的处理方法纪录1下,并不是最佳的也有将会是不正确的,假如你看到能碰撞出你的念头或临时帮到你那就太好了,假如沒有也期待获得你的协助,1起加油!

先说1下新项目的大致状况,该新项目是1个H5,用的原生态,架构是Mui。下面是处理方法:

1、画板隔空打牛的这个难题处理方法是画板的宽高于手机上显示屏的宽高就不容易出現这个难题了,之因此会出現这个难题是你在网页页面上应用高了,把画布的尺寸更改了从而部位产生了更改。不必给css定高。假如要求确实必须写,那就应用精准定位,摆脱文本文档流。

2、js照片转base64

方法1:Blob和FileReader 目标

完成基本原理:

  • 应用xhr恳求照片,并设定回到的文档种类为Blob目标[xhr.responseType = "blob"]
  • 应用FileReader 目标接受blob
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <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="container1"></p>
    <script>
        getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")
        function getBase64(imgUrl) {
            window.URL = window.URL || window.webkitURL;
            var xhr = new XMLHttpRequest();
            xhr.open("get", imgUrl, true);
            //要是拿到这个blob,难题就好处理了因此它挺关键的。
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (this.status == 200) {
                    //这个情况下获得了1个blob目标
                    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);

                    img.src = src
                    document.getElementById("container1").appendChild(img);
                }
            }
            xhr.send();
        }

    </script>
</body>

</html>

方法2:canvas.toDataURL()方式

完成基本原理:

  • 应用canvas.toDataURL()方式
  • 必须处理照片跨域难题 image.crossOrigin = '';
  • 应用了Jquery库的$.Deferred()方式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <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="container2"></p>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg";

        //width、height启用时传入实际像素值,操纵尺寸 ,不传则默认设置图象尺寸
        function getBase64Image(img, width, height) {
            var canvas = document.createElement("canvas");
            canvas.width = width ? width : img.width;
            canvas.height = height ? height : img.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            var dataURL = canvas.toDataURL();
            return dataURL;
        }
        function getCanvasBase64(img) {
            var image = new Image();
            image.crossOrigin = '';
            image.src = img;
            var deferred = $.Deferred();
            if (img) {
                image.onload = function () {
                    deferred.resolve(getBase64Image(image));//将base64发送给done提交解决
                    document.getElementById("container2").appendChild(image);
                }
                return deferred.promise();//难题要让onload进行后再return sessionStorage['imgTest']
            }
        }
        getCanvasBase64(imgSrc)
            .then(function (base64) {
                console.log("看看結果",base64);
            }, function (err) {
                console.log(err);
            });
    </script>
</body>

</html>

3、前端开发启用插口回到200,后端开发有回到,可是操纵台Network Response为空,没展现任何信息内容。

处理方法:

1、在js里边debugger,能够看到后台管理是不是有回到数据信息。

2、立即console.log(),立即把回到值复印出来,查询回到的数据信息文件格式,便捷前端开发开展数据信息的解决。

 由于后端开发回到的数据信息较多,并且数据信息文件格式繁杂,因此将会是Chrome的Response对数据信息长度或尺寸开展对有操纵,因此致使没显示信息。

此外发现1个操纵台不正确提醒,Uncaught SyntaxError:Invalid shorthand property initializer

缘故data中的1个特性冒号写变成“=”

处理:把等号改为冒号;

写在最终~

到此这篇有关Html5 canvas画图白板踩坑的文章内容就详细介绍到这了,更多有关Html5 canvas白板內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:1岁多小程序流程,简直小而非凡! 返回下一篇:没有了