canvas改變生成圖片，怎么輸出圖片data:image/png;base64啊？？


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Canvas改變生成縮略圖</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    .source{
        float: left;
    }
    img{
        margin-top: 20px;
        border: 1px solid #f00;
    }
    .change{
        margin-left: 10px;
        float: left;
    }
    i{
        font-size: 12px;
    }
</style>
</head>
<body>
    <div class="source">
        <label for="">原圖：</label><br/><img src="http://demo.deanhan.cn/thumbnail/images/pic.png" alt="">
    </div>
    <div class="change">
        <label>選擇尺寸</label>
        <select name="" id="size">
            <option value="100X100">100X100</option>
            <option value="200X200">200X200</option>
            <option value="300X300" selected>300X300</option>
            <option value="400X400">400X400</option>
            <option value="500X500">500X500</option>
        </select> <i>可右擊另存查看尺寸</i><br />
        <img src="這里怎么生成圖片data:image/png;base64地址??？？？" alt="" id="show">
    </div>
    <script type="text/javascript">
        var show = document.getElementById("show"),
            size = document.getElementById("size"),
            src = 'http://demo.deanhan.cn/thumbnail/images/pic.png';
        size.onchange = function(){
            var value = this.value,
                arr = value.split('X'),
                w = arr[0],
                h = arr[1];
            setImage(src,w,h);
        };
        setImage(src,300,300);
        function setImage(src,w,h){
            resizeImage(src,function(data){
                show.src = data;
            },w,h);
        }
        function resizeImage(src,callback,w,h){
            var canvas = document.createElement("canvas"),
                ctx = canvas.getContext("2d"),
                im = new Image();
                w = w || 0,
                h = h || 0;
            im.onload = function(){
                //為傳入縮放尺寸用原尺寸
                !w && (w = this.width);
                !h && (h = this.height);
                //以長寬最大值作為最終生成圖片的依據(jù)
                if(w !== this.width || h !== this.height){
                    var ratio;
                    if(w>h){
                        ratio = this.width / w;
                        h = this.height / ratio;
                    }else if(w===h){
                        if(this.width>this.height){
                            ratio = this.width / w;
                            h = this.height / ratio;
                        }else{
                            ratio = this.height / h;
                            w = this.width / ratio;
                        }
                    }else{
                        ratio = this.height / h;
                        w = this.width / ratio;
                    }
                }
                //以傳入的長寬作為最終生成圖片的尺寸
                if(w>h){
                    var offset = (w - h) / 2;
                    canvas.width = canvas.height = w;
                    ctx.drawImage(im,0,offset,w,h);
                }else if(w<h){
                    var offset = (h - w) / 2;
                    canvas.width = canvas.height = h;
                    ctx.drawImage(im,offset,0,w,h);
                }else{
                    canvas.width = canvas.height = h;
                    ctx.drawImage(im,0,0,w,h);
                }
                callback(canvas.toDataURL("image/png"));
            }
            im.src = src;
        }
    </script>
</body>
</html>

看這里，誰知道？？？請(qǐng)教教我！謝謝！
<img src="這里怎么生成圖片data:image/png;base64地址??？？？" alt="" id="show">

回答

編輯回答

枕邊人

圖片描述

我運(yùn)行沒有問題，你的代碼可以直接獲取到data64位的圖片，也能成功插入到#show里面，我覺得你可能遇到了跨域的問題，toDataURL里面的圖片需要在相同域名下，如果你是本地運(yùn)行的話，建議把圖片地址也改成本地試試

2018年2月14日 22:38

編輯回答

葬愛

先把圖片畫在canvas里面，然后調(diào)用canvas.toDataURL()輸出base64，放在圖片地址里面就好了

2018年1月20日 09:34

編輯回答

痞性

測(cè)試了下，是跨域的問題；我改了兩個(gè)地方就好了；
效果：

代碼：

    <script type="text/javascript">
        var show = document.getElementById("show"),
            size = document.getElementById("size"),
            src = 'github.png'; // 當(dāng)前目錄下的圖片，不要跨域，第一處；
            /*src = 'http://demo.deanhan.cn/thumbnail/images/pic.png';*/

然后我在 test.html 同文件夾下放了張圖片，這是第二處；

另外，要開個(gè)服務(wù)器，你看我 IP 地址就是 localhost，不會(huì)的話，百度下 wampserver 后者 xampp，

因?yàn)槲冶镜剡\(yùn)行是失敗的，好像記得書上有提到過，如圖：

2018年9月21日 10:26