网页制作

Html5 canvas画图白板踩坑
网页制作 2024/12/23 佚名
3 2

最近接手了一个小型的H5，最主要的功能大概就是拍照上传和canvas画板了。

主要是记录一下自己菜到像傻子一样的技术。

1、canvas画板隔空打牛！画布越往上部分错位距离越小，越往下距离越大。

2、图片上传！白板涂鸦的内容是以base64的形式传给后端工程师的，图片上传的图片是路径，后端要求统一格式，所以需要把路径转为base64。

3、算是谷歌的限制，前端发起请求后端可以收到，也给了返回值，但前端在浏览器里看不到返回值。

就上面的问题做个记录。把我的解决办法记录一下，不是最优的还有可能是错误的，如果你看到能碰撞出你的想法或者暂时帮到你那就太好了，如果没有也希望得到你的帮助，一起加油！

先说一下项目的大体情况，该项目是一个H5，用的原生，框架是Mui。下面是解决办法：

1、画板隔空打牛的这个问题解决办法是画板的宽高等于手机屏幕的宽高就不会出现这个问题了，之所以会出现这个问题是你在页面上使用高了，把画布的大小改变了从而位置发生了改变。不要给css定高。如果需求实在需要写，那就使用定位，脱离文档流。

2、js图片转base64

方式一：Blob和FileReader 对象

实现原理：

  • 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]
  • 使用FileReader 对象接收blob
<!DOCTYPE html>
<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="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) {
                    //这个时候得到了一个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>

方式二：canvas.toDataURL()方法

实现原理：

  • 使用canvas.toDataURL()方法
  • 需要解决图片跨域问题 image.crossOrigin = '';
  • 使用了Jquery库的$.Deferred()方法
<!DOCTYPE html>
<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="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对数据长度或者大小进行对有控制，所以导致没显示。

另外发现一个控制台错误提示，Uncaught SyntaxError:Invalid shorthand property initializer

原因data中的一个属性冒号写成了“=”

解决：把等号改成冒号；

写在最后～

标签：
Html5,canvas,画图,白板
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“Html5 canvas画图白板踩坑”

暂无“Html5 canvas画图白板踩坑”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com