精华内容
下载资源
问答
  • 出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法。一起跟随小编过来看看吧
  • 下面小编就为大家带来一篇canvas.toDataURL('image/png')报错处理方法推荐。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
  • 最近做了一个海报生成的组件,需要drawimage到画布上,image来源包括本地和异地的图片src...首先讲一点,异地图片如果不设置允许跨域访问,canvas.toDataURL是无法画image的,报画布污染的错;首先放一张我要生成的图;
  • 本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: 【场景】 用户打开网页,则请求腾讯COS(图片服务器)上的图片。使用canvas绘图。 然后,用户可以重新选择图片、裁剪、...
  • Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 关键词 canvas.toDataURL() crossOrigin Access-Control-Allow-Origin 前言 最近在...
  • 主要给大家介绍了关于利用canvas中toDataURL()将图片转为dataURL(base64)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
  • 最近在项目中用到了 canvas 的 toDataURL 方法来获取图片的 base64 格式数据,用以上传到后台。由于之前也遇到过 canvas 被跨域图片污染不能获取数据的坑,因此这回一开始就机智的把 crossOrigin 属性值加上,代码...
  • 到数据网址 HTMLCanvasElement.toDataURL 支持。
  • 主要思想是借助Canvas自己的API – toDataURL()来实现,整个实现 HTML + JavaScript的代码很简单。 复制代码代码如下: <html> <meta http-equiv=”X-UA-Compatible” content=”chrome=1″> <head&...
  • 关于canvas.toDataURL 在iOS运行失败的问题 最近做了一个海报生成的组件,需要drawimage到画布上,image来源包括本地和异地的图片src; 首先讲一点,异地图片如果不设置允许跨域访问,canvas.toDataURL是无法画image...

    关于canvas.toDataURL 在iOS运行失败的问题


    最近做了一个海报生成的组件,需要drawimage到画布上,image来源包括本地和异地的图片src;
    首先讲一点,异地图片如果不设置允许跨域访问,canvas.toDataURL是无法画image的,报画布污染的错;首先放一张我要生成的图;

    在这里插入图片描述
    上面加载了两张本地图片,两张异地图片,写了一些文字;在windows谷歌浏览器跑是好的,是吧,图片画出来,感觉无压力;用安卓也是好的,很开心;可是到IOS手机上,我去,怎么图片显示不出来啊,然后
    try catch 错误,没啥有用的信息;

     try {
     // 将canvas对象转化为image/png
       var dataUrl = canvas.toDataURL('image/png')
     } catch (err) {
       console.log(err)
     }
    
    

    我擦,这怎么办???
    然后去cnbing搜,好多相同问题,好多原因,有个老外说动态更改canvas宽高无法再ios画出图片;还有的人说:
    图片文件 size 太大,是否图片超过了 3M ? -----------我看了下生成的图片才几百kb PASS

    图片的 dimension 太大,是否图片尺寸超过了 1000 x 1000 像素?我的尺寸确实超过了,宽高都超了,然而测试了下小的宽高,照旧ios画不出来啊~~~PASS

    你指定的 mime_type 不支持,你用的是哪个 mime type?—canvas的 toDataURL API我看过了,可以支持三个类型,各试了一遍,无果 PASS
    先上我的代码:

    <template>
        <div id="Poster">
            <div class="mask" @click="hidePoster()"></div>
            <canvas ref="canvas" width="588" height="1044" style="display:none;"></canvas>
            <div ref="box" id="Poster-box" @click.stop>
              <span class="close"  @click="hidePoster()"></span>
            </div>
            <p class="tip">长安按海报发送给朋友</p>
        </div>
    </template>
    
    <script>
    export default {
      data () { // 参数
        const u = navigator.userAgent // ios终端
        const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
        return { // 返回参数
          localUrl: isIOS ? location.href.split('#')[0] : location.href, // 当前路径
          canvas: Object // canvas对象
        }
      },
      mounted () {
        this.initCanvas()
      },
      methods: {
        /**
         * 隐藏海报
         */
        hidePoster () {
          this.$emit('hide')
        },
        /**
         * 加载图片
         * @param {Object} img 图片地址
         * @return {Promise} img dom
         */
        loadImage (img) {
          return new Promise((resolve, reject) => {
            // image dom 对象
            const $image = document.createElement('img')
            if (img.isCross_domain) {
              console.log(img.url)
              $image.setAttribute('crossOrigin', 'Anonymous')
            }
            $image.onload = () => {
              resolve($image)
            }
             $image.src = img.url
            $image.onerror = reject
          })
        },
        /**
         * init初始化canvas函数
         */
        async initCanvas () {
          // 获取vue实例
          var vm = this
          vm.$indicator.open({
            text: '加载中...',
            spinnerType: 'fading-circle'
          })
          this.canvas = this.$refs.canvas.getContext('2d')
          this.canvas.height = 400
          this.canvas.width = 300
          this.canvas.fillStyle = '#ffffff'
          this.canvas.fillRect(0, 0, 588, 1044)
    
          // image urls
          const imgArr = [
            {
              url: require('../assets/poster-banner.png'),
              isCross_domain: false
            },
            {
              url: require('../assets/shadow.png'),
              isCross_domain: false
            },
            {
              url: 'https://s3-011-shinho-syj-uat-bjs.s3.cn-north-1.amazonaws.com.cn/mall/2019_06/border04.png',
              isCross_domain: true
            },
            {
              url: 'https://s3-011-shinho-syj-uat-bjs.s3.cn-north-1.amazonaws.com.cn/mall/2019_06/132.jpg',
              isCross_domain: true
            }
          ]
          // image doms
          await Promise.all(imgArr.map(img => this.loadImage(img))).then((imgs) => {
            console.log('done')
            this.canvas.drawImage(imgs[0], 0, 0, 588, 216 * 2)
            this.canvas.drawImage(imgs[1], 97 * 2, 166 * 2, 100 * 2, 100 * 2)
    
            this.canvas.save()
            this.canvas.beginPath()
            this.canvas.arc(147 * 2, 214 * 2, 34 * 2, 0, 2 * Math.PI, false)
            this.canvas.clip()
            this.canvas.drawImage(imgs[2], 113 * 2, 180 * 2, 68 * 2, 68 * 2)
            this.canvas.restore()
            this.canvas.drawImage(imgs[3], 189 * 2, 409 * 2, 88 * 2, 88 * 2)
            // 绘制文字
            this.drawText('我就是个我就账号账号', 147 * 2, 278 * 2, 290 * 2, '#333333', '32px PingFangSC-Regular ')
            this.drawText('荣誉称号是我', 147 * 2, 300 * 2, 290 * 2, '#999999', '26px PingFangSC-Regular ')
            this.drawText('距离冲榜还差10人', 147 * 2, 340 * 2, 290 * 2, '#FA6F5B', 'bold 36px arial')
            this.drawText('快来助我冲榜赢红烧酱油吧', 147 * 2, 370 * 2, 290 * 2, '#FA6F5B', 'bold 36px arial ')
            this.drawText('扫描二维码', 180 * 2, 443 * 2, 172 * 2, '#333333', '28px PingFangSC-Regular ', 'right')
            this.drawText('直达冲榜活动', 180 * 2, 463 * 2, 172 * 2, '#333333', '28px PingFangSC-Regular ', 'right')
            this.drawText('邀请好友跟你一起冲大奖', 180 * 2, 483 * 2, 172 * 2, '#333333', '28px PingFangSC-Regular ', 'right')
            this.showPic()
            vm.$indicator.close()
          })
        },
        /**
         * 绘制文字
         * @param {String} title  文字名称
         * @param {Number} x  x轴坐标
         * @param {Number} y  y轴坐标
         * @param {Number} maxwidth  最大宽度
         * @param {String} color  颜色
         * @param {String} font  字体样式
         * @param {String} textalign  文字排版
         */
        drawText (title, x, y, maxwidth, color, font, textalign = 'center') {
          this.canvas.font = font
          this.canvas.textAlign = textalign
          this.canvas.fillStyle = color
          this.canvas.fillText(title, x, y, maxwidth)
        },
        /**
         * 显示图片
         */
        showPic () {
          // 获取canvas对象
          let canvas = this.$refs.canvas
    
          try {
            // 将canvas对象转化为image/png
            var dataUrl = canvas.toDataURL('image/png')
          } catch (err) {
            console.log(err)
          }
    
          // 创建img 元素
          var newImg = document.createElement('img')
          newImg.src = dataUrl
          newImg.style.width = '100%'
          newImg.style.height = '100%'
          newImg.className = 'img-poster'
          newImg.style.borderRadius = '8px'
          this.$refs.box.appendChild(newImg)
        }
    
      }
    }
    </script>
    
    

    盘查了好久,最后找到bug,就是下面这个function

     /**
         * 加载图片
         * @param {Object} img 图片地址
         * @return {Promise} img dom
         */
        loadImage (img) {
          return new Promise((resolve, reject) => {
            // image dom 对象
            const $image = document.createElement('img')
            $image.src = img.url
            if (img.isCross_domain) {
              console.log(img.url)
              $image.setAttribute('crossOrigin', 'Anonymous')
            }
            $image.onload = () => {
              resolve($image)
            }
            $image.onerror = reject
          })
        },
    

    有没有注意到crossOrigin属性是在src属性之后赋值的;/(ㄒoㄒ)/~~
    crossOrigin属性必须在src属性之前赋值
    crossOrigin属性必须在src属性之前赋值
    crossOrigin属性必须在src属性之前赋值
    尽管没有找到准确的文档明确指定crossOrigin属性必须在src属性之前赋值,但是要适配IOS确实要这么做;
    大家如果对 crossorigin 有疑问可以看一下MDN对crossorigin的解释:
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image

    里面讲了画布的污染和解决方法,就是设置 crossorigin = “Anonymous”;里面的方法也是先设置crossorigin在图片加载完后设置 src;
    如下

    var img = new Image,
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        src = "http://example.com/image"; // insert image url here
    
    img.crossOrigin = "Anonymous";
    
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage( img, 0, 0 );
        localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
    }
    img.src = src;
    // make sure the load event fires for cached images too
    if ( img.complete || img.complete === undefined ) {
        img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        img.src = src;
    }
    

    一切搞定

    LOVE  & PEACE

    展开全文
  • <div><p>First, I try to create an canvas without using rasterizeHTML.js like the following and try to alert <strong>toDataURL("image/png")</strong> that is work fine on ios 9.1 chrome and ...
  • 现象:在使用canvas的toDataURL()方法时,控制台有时会报错:Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 原因:这是由于之前由...

    现象:在使用canvas的toDataURL()方法时,控制台有时会报错:Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
    原因:这是由于之前由drawImage()向canvas导入的图片跨域而导致的。
    解决方法:

    1、在引用图片之前打开跨域资源允许权限(一定要注意顺序):

    var img=new Image;
    img.setAttribute('crossOrigin', 'anonymous') //关键
    img.src = url + '?time=' + new Date().valueOf();
    img.src="图片地址";
    

    2、存放图片地址的服务器也要开启跨域允许权限,不然会报错:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    如Apache设置:
    ①.打开LoadModule headers_module modules/mod_headers.so

    ②.在虚拟主机内加上 Header set Access-Control-Allow-Origin *

    总结

    跨域图片能正常裁剪(图片未转化成base64),应该满足三个条件:

    1,img元素中设置crossorigin属性
    2,图片允许跨域,设置响应头Access-Control-Allow-Origin
    3,使用js方式请求图片资源, 需要避免使用缓存,设置url后加上时间戳,或者http头设置Cache-Control为no-cache

    最后 贴上我canvas绘制图片,画线最后生成图片的代码

    在这里插入图片描述

    <div class="jiepingCanvas" id="jtCs"  v-show="dialogJPG">
        <canvas id="mycanvas" ref="mycanvas" width="848" height="508"></canvas>
        <div class="yesNo">
            <div class="jtYes" @click="jtSure()">
                <img src="../common/comImg/yes.png" alt="">
            </div>
            <div class="jtYes" @click="jtCancel()">
                <img src="../common/comImg/no.png" alt="">
            </div>
        </div>
        <div class="tipsjt">
             提示:图片可以进行画线操作
        </div>
    </div>
    
    data() {
     return {
    	 onoffjt:false,
    	 oldxjt:0,
    	 oldyjt:0,
    	 ctxjt:'',
    	 linecolorjt:'',
    	 linwjt:8,
    	 onArrjt:[],
    	 endArrjt:[],
    	 ctxjt:"",
    	 huajt:false,
    	 canvasJT:""
     }
    }
    
    //初始化画布
    canvasInit(){
    	var that=this
    	var imgUrl='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583035764,1571388243&fm=26&gp=0.jpg'
    	that.dialogJPG=true
    	//  获取canvas
    	that.canvasJT = document.getElementById("mycanvas")
    	var a = setInterval(() =>{
    	    that.canvasJT = document.getElementById("mycanvas")
    	    if(!that.canvasJT){
    	        return false
    	    } else {
    	        clearInterval(a)
    	        that.ctxjt = that.canvasJT.getContext('2d')
    	        var img = new Image()
    	        
    	        img.src = imgUrl+"?timeStamp="+new Date();
    	        img.setAttribute("crossOrigin",'anonymous')
    	        img.onload = function(){
    	            if(img.complete){
    	                //  根据图像重新设定了canvas的长宽
    	                that.canvasJT.setAttribute("width",844)
    	                that.canvasJT.setAttribute("height",504)
    	                //  绘制图片
    	                that.ctxjt.drawImage(img,0,0,844,504)
    	                that.initjt()
    	            }
    	        }
    	        that.dialogJPG=true
    	    }
    	},1)
    }
    
    //开始画线
    initjt(){
        //画一个黑色矩形
        this.ctxjt.fillStyle="transparent";
        this.ctxjt.fillRect(0,0,848,508);
        //按下标记
        this.onoffjt=false;
        this.oldxjt=0;
        this.oldyjt=0;
        this.linecolorjt=this.linecolor;
        //宽度默认为8
        this.linwjt=8;
        //鼠标移动事件,事件绑定
        this.canvasJT.addEventListener("mousemove",this.drawjt,true);
        this.canvasJT.addEventListener("mousedown",this.downjt,false);
        this.canvasJT.addEventListener("mouseup",this.upjt,false);
    },
    //鼠标按下事件
    downjt(event){
        if(this.huajt==true){
            this.onoffjt=false
        }else{
            this.onoffjt=true;
            this.oldxjt=event.pageX-this.canvasJT.getBoundingClientRect().left;
            this.oldyjt=event.pageY-this.canvasJT.getBoundingClientRect().top;
            console.log(this.oldxjt,this.oldyjt,'event')
        }
    },
    //鼠标绘制线条
    drawjt(event){
        if(this.onoffjt==true){
                    var newxjt=event.pageX-this.canvasJT.getBoundingClientRect().left;
                    //getBoundingClientRect方法是边框距离浏览器的距离
                    var newyjt=event.pageY-this.canvasJT.getBoundingClientRect().top;
                    // console.log(newx,newy,'000')
                    this.ctxjt.beginPath();
                    this.ctxjt.moveTo(this.oldxjt,this.oldyjt);
                    this.ctxjt.lineTo(newxjt,newyjt);
                    // console.log(newx);
                    this.ctxjt.strokeStyle=this.linecolorjt;
                    this.ctxjt.lineWidth=this.linwjt;
                    this.ctxjt.lineCap="round";
                    this.ctxjt.stroke();
                    
                    this.oldxjt=newxjt;
                    this.oldyjt=newyjt;
                    let xy={
                        x:this.oldxjt,
                        y:this.oldyjt
                    }
                    this.onArrjt.push(xy)
                }
           
    },
    //鼠标抬起事件
    upjt(){
        this.onoffjt=false;
        if(this.onArrjt.length>0){
            this.endArrjt.push(this.onArrjt)
            this.onArrjt=[]
        }
    },
    //点击确认生成图片
    jtSure(){
        let dataURL = document.getElementById('mycanvas')
        let dataURLs=dataURL.toDataURL("images/png")
            let params = {
                data: dataURLs,
                compid: 30,
                hzm:'png'
            };
            postUpFile(params).then(res => {
                let { ReturnCode, Data } = res;
                if (ReturnCode == 200) {
    
                    let DataUrl = Data.Url;
                    console.log(DataUrl,'DataUrl路径')
                    
                    let msg=this.nickName+'#&$'+DataUrl
                    let senBtnws={
                        order:enumPack.enum_msg.drawImage,
                        uid:Number(this.option.uid),
                        msg:msg,
                        device:4
                    }
                    this.handdleMsg(JSON.stringify(senBtnws))
                    this.stepArray.push(DataUrl)
    
                } 
    
            });
    
            this.dialogJPG=false
            let c=document.getElementById("mycanvas");  
            let cxtjt=c.getContext("2d");  
            cxtjt.clearRect(0,0,c.width,c.height); 
    },
    //点击取消清除画布
    jtCancel(){
        this.dialogJPG=false
        let c=document.getElementById("mycanvas");  
        let cxtjt=c.getContext("2d");  
        cxtjt.clearRect(0,0,c.width,c.height); 
    }
    }
    
    

    以上参考了很多大神的文章
    如:https://www.cnblogs.com/sunala/p/7085525.html https://segmentfault.com/q/1010000008648867

    展开全文
  • 只好自个 encode 了。事由是这样的,接到一个截图需求(以 base64 输出),但是在某个环境下,Canvas.toDataURL 这个接口返回的数据是错误的。为此,写一篇文章记录一...

    只好自个 encode 了。

    事由是这样的,接到一个截图需求(以 base64 输出),但是在某个环境下,Canvas.toDataURL 这个接口返回的数据是错误的。

    为此,写一篇文章记录一下,如何绕过 Canvas.toDataURL ,生成 base64 字符串。

    以下为 Cocos官网文档中给出的截图事例代码。https://docs.cocos.com/creator/manual/zh/render/camera.html#%E6%88%AA%E5%9B%BE

    官网中的截图代码

    幸运的是 readPixels() 能读到位图的像素信息。

    程序就是处理输入和输出的过程,为此,明确我们的输入输出。

    • 输入:data: Uint8Array 位图信息 和 图片宽高。

    • 输出:带有图片信息的base64字符串。(可将该字符串放浏览器中的地址栏,会返回一张图片)

    经思考????一番,决定采用以下几步实现:

    • 像素数据 -> 转 JPG 数据 -> 转 base64

    如何转 JPG 格式?按照厂里的方法,应该去了解其文件格式如何生成,需要什么头文件信息,关于JPEG相关内容可参考wiki : https://en.wikipedia.org/wiki/JPEG

    但????,在思考前,可以考虑是否有前任????的轮子。毕竟时间也是一种成本。

    很快,很有型地在大型交友网站 github 中找到了前人留下的轮子。

    https://github.com/jpeg-js/jpeg-js/blob/master/lib/encoder.js

    这是 JavaScript 的代码,白玉无冰这里操作的是直接拷贝出来,放到一个 TypeScript 代码中,导出 encodeJPG 方法。

    搬运与改造 jpeg-js

    再参考 jpeg-js 中的实例代码,组织一下,很快就生成了 JPEG 的数据。

    像素数据 转 JPEG 数据

    再把JPEG 的数据中 Uint8Arraybase64

    Uint8Array 转 base64

    但发现截图反了。

    截图反了

    最后,再对原来的数据翻转一下,完整的核心代码如下:

    // 这样我们就能从 RenderTexture 中获取到数据了
    let data = texture.readPixels();
    let width = texture.width;
    let height = texture.height;
    // 接下来翻转y的数据
    const flipYData = new Uint8Array(width * height * 4);
    let rowBytes = width * 4;
    for (let row = 0; row < height; row++) {
        let startRow = height - 1 - row;
        let start = startRow * width * 4;
        for (let i = 0; i < rowBytes; i++) {
            flipYData[row * width * 4 + i] = data[start + i];
        }
    }
    // 准备生成 jpegImageData
    const rawImageData = {
        data: flipYData,
        width: width,
        height: height,
    };
    const jpegImageData = encodeJPG(rawImageData, 50);
    // jpeg -> base64
    function uint8ToString(buf) {
        var i, length, out = '';
        for (i = 0, length = buf.length; i < length; i += 1) {
            out += String.fromCharCode(buf[i]);
        }
        return out;
    }
    const base64 = btoa(uint8ToString(jpegImageData.data));
    cc.warn('base64', "data:image/jpg;base64," + base64);
    

    完整代码工程:https://github.com/baiyuwubing/cocos-creator-examples/tree/master/2.4.x/assets/demo06

    以上为白玉无冰使用 Cocos Creator 2.4 实现 "截图生成 base64" 的过程分享。


    Fake3D && Shader
    MatCap && Shader
    如何抄shader
    3D折纸
    渐变色文字3.0
    水排序效果

    点击“阅读原文”查看精选导航

    “点赞“ ”在看” 鼓励一下

    展开全文
  • 图片转bace64方法如下 ``` function getBase64Image(img) { var dataURL;...在 canvas.toDataURL 时传 quality 参数,不管传几都没有体现出来压缩,穿1图片出来是300k ,传0.1出来也是300k 求解
  • // 原理: 利用canvas.toDataURL的API转化成base64 urlToBase64(url) { return new Promise ((resolve,reject) => { let image = new Image(); image.onload = function() { let canvas = document.createElement...

    æµç¨å¾
    url 转 base64
    // 原理: 利用canvas.toDataURL的API转化成base64

    urlToBase64(url) {
    return new Promise ((resolve,reject) => {
    let image = new Image();
    image.onload = function() {
    let canvas = document.createElement(‘canvas’);
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    // 将图片插入画布并开始绘制
    canvas.getContext(‘2d’).drawImage(image, 0, 0);
    // result
    let result = canvas.toDataURL(‘image/png’)
    resolve(result);
    };
    // CORS 策略,会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
    image.setAttribute(“crossOrigin”,‘Anonymous’);
    image.src = url;
    // 图片加载失败的错误处理
    image.onerror = () => {
    reject(new Error(‘图片流异常’));
    };
    }
    调用方法

    let imgUrL = http://XXX.jpg

    this.getDataUri(imgUrL).then(res => {
    // 转化后的base64图片地址
    console.log(‘base64’, res)
    })
    2. base64 转 blob
    base64 to blob 的方法封装

    // 原理:利用URL.createObjectURL为blob对象创建临时的URL

    base64ToBlob ({b64data = ‘’, contentType = ‘’, sliceSize = 512} = {}) {
    return new Promise((resolve, reject) => {
    // 使用 atob() 方法将数据解码
    let byteCharacters = atob(b64data);
    let byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    let slice = byteCharacters.slice(offset, offset + sliceSize);
    let byteNumbers = [];
    for (let i = 0; i < slice.length; i++) {
    byteNumbers.push(slice.charCodeAt(i));
    }
    // 8 位无符号整数值的类型化数组。内容将初始化为 0。
    // 如果无法分配请求数目的字节,则将引发异常。
    byteArrays.push(new Uint8Array(byteNumbers));
    }
    let result = new Blob(byteArrays, {
    type: contentType
    })
    result = Object.assign(result,{
    // jartto: 这里一定要处理一下 URL.createObjectURL
    preview: URL.createObjectURL(result),
    name: 图片示例.png
    });
    resolve(result)
    })
    }
    你可以这样调用:

    let base64 = base64.split(’,’)[1]

    this.base64ToBlob({b64data: base64, contentType: ‘image/png’}).then(res => {
    // 转后后的blob对象
    console.log(‘blob’, res)
    })
    3. blob 转 base64
    blob to base64 的方法封装

    // 原理:利用fileReader的readAsDataURL,将blob转为base64

    blobToBase64(blob) {
    return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
    resolve(e.target.result);
    };
    // readAsDataURL
    fileReader.readAsDataURL(blob);
    fileReader.onerror = () => {
    reject(new Error(‘文件流异常’));
    };
    });
    }
    你可以这样调用:

    this.blobToBase64(blob).then(res => {
    // 转化后的base64
    console.log(‘base64’, res)
    })

    展开全文
  • 在使用canvas的toDataURL()方法时,控制台有时会报错 原因:这是由于之前由drawImage()向canvas导入的图片跨域而导致的。 解决办法 1、在引用图片之前打开跨域资源允许权限(一定要注意顺序): var ...
  • canvas.toDataURL('image/png'); 二、使用步骤 1.引入库 代码如下(示例): import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings....
  • canvas的toDataURL()方法

    万次阅读 热门讨论 2020-06-14 23:16:29
    canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type参数其类型,默认为PNG格式。图片的分辨率为96dpi。 一、语法 canvas.toDataURL(type, encoderOptions); 二、参数 1、type:图片格式,...
  • 此文主要记录一个要点: 当用户上传已上传头像,裁剪头像弹窗获取到图片,当调用canvas的toDataURL方法时可能会报:Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted ...
  • 现象:在使用canvas的toDataURL()方法时,控制台有时会报错:Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 原因:这是由于之前由...
  • 了解HTMLCanvasElement.toDataURL()

    千次阅读 2019-05-22 12:09:25
    Canvas本质上就是一个位图图像,因此,浏览器提供了若干API可以将Canvas图像转换成可以作为IMG呈现的数据,其中最老牌的方法就是HTMLCanvasElement.toDataURL(),此方法可以返回Canvas图像对应的data URI,也就是...
  • canvas学习——toDataURL()方法

    万次阅读 2018-09-12 19:45:56
    toDataURL()方法 1、toDataURL()方法是什么? toDataURL()是canvas对象的一种方法,用于将canvas对象转换为base64位编码; 2、利用canvas的toDataURL()方法如何将图片转换为base64编码? 通过将图片绘制...
  • 我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。...HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的 data URL。可以使用ty...
  • canvas.setAttributeNode(anh) ctx.drawImage(that, 0, 0, w, h) } var base64 = canvas.toDataURL('image/jpeg', quality) // 这里得到压缩后的 base64 格式的图片 接下来使用 drawImage 绘制图片,使用 ...
  • 问题描述: 这个问题出现在我尝试通过如下方式保存Canvas内容时: var imgCanvas = document....var imageAsDataURL = imgCanvas.toDataURL(&quot;image/png&quot;); localStorage.setItem(&quot;na...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,595
精华内容 6,238
关键字:

todataurl