问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

canvas base64保存的jpeg图片是黑色

头像
IF进ELSE退
    1.1k15171235

    我在右框输出canvas生成的base64后是黑色背景这是怎么回事

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{margin: 0;padding: 0;}
            .box{width:100%;overflow:hidden;margin: 0 auto;}
            .piclistbox{width: 50%;float: left;overflow: hidden;border: 1px solid red;box-sizing: border-box;height:300px;}
            .canvasbox{width: 50%;float:right;overflow: hidden;border: 1px solid red;box-sizing: border-box;height:300px;}
        </style>
    </head>
    <body>
        <div class="box">
        <div class="piclistbox">
            <canvas id="pic_canvas" width="400" height="400"></canvas>
        </div>
        <div class="canvasbox">
            <img src="#" id="imgshow"/>
        </div>
        </div>
        <input type="button" value="生成" class="btnpoptailor"></input>
    </body>
    <script type="text/javascript">
                var canvas = document.getElementById('pic_canvas');
                var img = new Image();
                var _this = this;
                img.src = "http://img1.3lian.com/img013/v1/83/d/1.jpg";
                img.onload = function(){
                    
                    var ctx = canvas.getContext("2d");
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                    if(img.height > 400){
                       img.width *= 400 / img.height;
                       img.height = 400;
                    }                
                    if(img.width > 400){
                       img.height *= 400 / img.width;
                       img.width = 400;
                    }
                    canvas.width = img.width;
                    canvas.height = img.height;
                    
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                }
                var imgUrl = canvas.toDataURL("image/jpeg");
                document.getElementById("imgshow").setAttribute('src',imgUrl);
    </script>
</html>

    链接地址代码

    canvasjavascript
    阅读 9.9k
    2 个回答
    得票最新
    头像
    heyAaron
      342917

      有两个问题：
      1.图片跨域问题
      这里有答案，需要翻墙

      2.这段代码应该要放到图片onload后执行。

         var imgUrl = canvas.toDataURL("image/jpeg");
   document.getElementById("imgshow").setAttribute('src',imgUrl);

      下面是转自 stackoverflow 的答案，自行翻译下，大概意思就是图片跨域问题造成的toDataUrl方法不能用。

      33
down vote
accepted
Unless google serves this image with the correct Access-Control-Allow-Origin header, then you wont be able to use their image in canvas. This is due to not having CORS approval. You can read more about this here, but it essentially means:

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.

This protects users from having private data exposed by using images to pull information from remote web sites without permission.
I suggest just passing the URL to your server-side language and using curl to download the image. Be careful to sanitise this though!

EDIT:

As this answer is still the accepted answer, you should check out @shadyshrif's answer, which is to use:

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
This will only work if you have the correct permissions, but will at least allow you to do what you want
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题