canvas改变生成图片，怎么输出图片data:image/png;base64啊？？_JavaScript_论坛

canvas改变生成图片，怎么输出图片data:image/png;base64啊？？

se***ng 分类：JavaScript 人气：777 回帖：3 发布于6年前收藏


<!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);
                //以长宽最大值作为最终生成图片的依据
                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>

看这里，谁知道？？？请教教我！谢谢！
<img src="这里怎么生成图片data:image/png;base64地址啊？？？" alt="" id="show">

标签：javascript java

讨论这个帖子（3）垃圾回帖将一律封号处理……

Lv5 码农

陪***ˇ 产品经理 6年前#1

测试了下，是跨域的问题；我改了两个地方就好了；
效果：

代码：

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

然后我在 test.html 同文件夹下放了张图片，这是第二处；