当前位置 博文首页 > 文章内容

    canvas画图实现图片等比例展示,以及图片预览有时候不展示的原因

    作者: 栏目:未分类 时间:2020-08-18 16:01:40

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    声明:我是在vue项目下写的;

    1.用canvas画图,但是图片有时候出现有时候不出现的;

    附上源代码:

         <input type="file" accept="image/*" @change="showImage"/>
    showImage(e) {
                let vm = this;
                let reader = null;
                if(window.FileReader) {
                    reader = new FileReader;
                } else {
                    alert('浏览器不支持预览功能');
                }
                let imageFiles = e.target.files[0];
                reader.readAsDataURL(imageFiles);
                reader.onload = function(event) { //reader.onload之后直接将图片写入    canvas,会出现图片有时候会没有显示
                    let img = new Image();
                    img.src = event.target.result;
                    let canvas = document.getElementById('canvas');
                    let ctx = canvas.getContext('2d');
                    ctx.beginPath();
                    ctx.drawImage(img,0,0,300,300);
                    ctx.closePath();
                }
            },

    修改方法为

    showImage(e) {
                let vm = this;
                let reader = null;
                if(window.FileReader) {
                    reader = new FileReader;
                } else {
                    alert('浏览器不支持预览功能');
                }
                let imageFiles = e.target.files[0];
                reader.readAsDataURL(imageFiles);
                reader.onload = function(event) {
                    let img = new Image();
                    img.src = event.target.result;
                    img.onload = function() { //等图片读取完成之后再写入canvas
                        let canvas = document.getElementById('canvas');
                        let ctx = canvas.getContext('2d');
                        ctx.beginPath();
                        ctx.drawImage(img,0,0,300,300);
                        ctx.closePath();
                    }
                }
            },

     2.图片等比例展示

    showImage(e) {
                let vm = this;
                let reader = null;
                if(window.FileReader) {
                    reader = new FileReader;
                } else {
                    alert('浏览器不支持预览功能');
                }
                let imageFiles = e.target.files[0];
                reader.readAsDataURL(imageFiles);
                reader.onload = function(event) {
                    let img = new Image();
                    img.src = event.target.result;
                    img.onload = function() { //等图片读取完成之后再写入canvas
                        let imgWidth = img.width/2;
                        let imgHeight = img.height/2;
                        let canvas = document.getElementById('canvas');
                        let scale = 1;
                        let tt = 400;
                        if(imgHeight > tt || imgWidth >tt) {
                            if(imgWidth > imgHeight) {
                                scale = tt/imgWidth/2;
                            }else {
                                scale = tt/imgHeight/2;
                            }
                        }
                        canvas.height = imgHeight*scale;
                        canvas.width = imgWidth*scale;
                        let ctx = canvas.getContext('2d');
                        ctx.beginPath();
                        ctx.drawImage(img,0,0,canvas.width,canvas.height);
                        ctx.closePath();
                    }
                }
            },
     
    showImage(e) {
                let vm = this;
                let reader = null;
                if(window.FileReader) {
                    reader = new FileReader;
                } else {
                    alert('浏览器不支持预览功能');
                }
                let imageFiles = e.target.files[0];
                reader.readAsDataURL(imageFiles);
                reader.onload = function(event) {
                    let img = new Image();
                    img.src = event.target.result;
                    img.onload = function() { //等图片读取完成之后再写入canvas
                        let imgWidth = img.width/2;
                        let imgHeight = img.height/2;
                        let canvas = document.getElementById('canvas');
                        let scale = 1;
                        let tt = 400;
                        if(imgHeight > tt || imgWidth >tt) {
                            if(imgWidth > imgHeight) {
                                scale = tt/imgWidth/2;
                            }else {
                                scale = tt/imgHeight/2;
                            }
                        }
                        canvas.height = imgHeight*scale;
                        canvas.width = imgWidth*scale;
                        let ctx = canvas.getContext('2d');
                        ctx.beginPath();
                        ctx.drawImage(img,0,0,canvas.width,canvas.height);
                        ctx.closePath();
                    }
                }
            },