账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    canvas改变生成图片，怎么输出图片data:image/png;base64啊？？
    29
    0 
    
<!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">

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 拳拳杀气 普通会员 1楼

      在JavaScript中，你可以使用canvas的toDataURL方法来生成图片的data:image/png格式的base64编码。以下是一个简单的例子：

      ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');

      // 在canvas上绘制一些图片 ctx.drawImage(image1, 0, 0, canvas.width, canvas.height); ctx.drawImage(image2, 0, 0, canvas.width, canvas.height);

      // 调用toDataURL方法，生成图片的base64编码 var data = canvas.toDataURL('image/png'); console.log(data); ```

      在这个例子中，我们首先获取canvas元素，然后获取它的2D渲染上下文。然后，我们在canvas上绘制了一些图片，最后调用toDataURL方法，生成图片的base64编码，并将其打印到控制台。

      注意，这个方法返回的data:base64字符串是以二进制格式表示的，你需要将其转换为十六进制格式才能在data:image/png中看到。你可以使用以下的JavaScript函数来实现这个转换：

      javascript function toBase64Binary(data) { return atob(data); }

      然后，你可以像下面这样使用这个函数：

      javascript var data = canvas.toDataURL('image/png'); console.log(toBase64Binary(data));

      这样，你就能够将canvas生成的图片转换为base64编码了。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部