利用canvas实现本地上传图片并预览

AnthonyHan 发布于2019-08-22 10:40 / 1613人阅读

摘要：模拟点击为了能使点击的按钮可定制，所以我们采用模拟点击的方法来触发里面有个类型是的可以上传文件，读取图片上面函数中点击，然后监听，选择图片之后会执行函数来读取文件信息获取输入的图片请确保文件为图像类型判断是否图片，在移动端由于浏览器对调用类

模拟点击input

为了能使点击的按钮可定制，所以我们采用模拟点击input的方法来触发input
input里面有个类型是file的可以上传文件，

function doInput(id){
    var inputObj = document.createElement("input");
    inputObj.addEventListener("change",readFile,false);
    inputObj.type = "file";
    inputObj.accept = "image/*";
    inputObj.id = id;
    inputObj.click();
}

读取图片

上面函数中点击input，然后监听change，选择图片之后会执行readFile函数来读取文件信息

function readFile(){
    var file = this.files[0];//获取input输入的图片
    if(!/image/w+/.test(file.type)){
        alert("请确保文件为图像类型");
        return false;
    }//判断是否图片，在移动端由于浏览器对调用file类型处理不同，虽然加了accept = "image/*"，但是还要再次判断
    var reader = new FileReader();
    reader.readAsDataURL(file);//转化成base64数据类型
    reader.onload = function(e){
            drawToCanvas(this.result);
        }
    }
}

canvas预览图片

用了一个drawToCanvas函数来将转化后的base64数据写到canvas，虽然可以直接用img标签直接显示，但是总是感觉显示会很慢

function drawToCanvas(imgData){
    var cvs = document.querySelector("#cvs");
        cvs.width=300;
        cvs.height=400;
        var ctx = cvs.getContext("2d");
        var img = new Image;
            img.src = imgData;
            img.onload = function(){//必须onload之后再画
                ctx.drawImage(img,0,0,300,400);
                strDataURI = cvs.toDataURL();//获取canvas base64数据
            }
}

用canvas呈现更加灵活，如果后面要对图片进行位置，大小的变换，这样比较方便

上传服务器

以上已经获取到了图片的base64，由于图片的base64字符串很长不能用get方式，通过post去传给后台

注意

这里说一点每次给canvas重新width和height时画布会重新绘制，也就是init了，还有用css给canvas高宽和字标签设置是不一样的，可以自行百度

公众号

我们的主页

GPU云服务器云服务器图片上传服务器并预览图片本地预览预览本地图片 php 预览上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91039.html

利用canvas实现本地上传图片并预览

摘要：模拟点击为了能使点击的按钮可定制，所以我们采用模拟点击的方法来触发里面有个类型是的可以上传文件，读取图片上面函数中点击，然后监听，选择图片之后会执行函数来读取文件信息获取输入的图片请确保文件为图像类型判断是否图片，在移动端由于浏览器对调用类模拟点击input 为了能使点击的按钮可定制，所以我们采用模拟点击input的方法来触发inputinput里面有个类型是file的可以上传文件，...

B0B0 2019-08-01 15:52 评论0 收藏0
实践是检验程序员的唯一标准01：用户不想跟你说话并向你扔出一张图片 - 图片上传组件开发【思路篇】

摘要：表示不一定是原生形式的数据。接口基于，继承了的功能并将其扩展使其支持用户系统上的文件。读取操作完成的时候，会变成已完成，并触发事件，同时属性将包含一个格式的字符串编码以表示所读取文件的内容。温馨提示：这里除了一些幼稚的小组件啥也没有温馨提示-续：这是一个新的系列，写一些实际开发中遇到的一些常用的功能，想法笨拙，代码乱套写在前面图片上传，作为web端一个常用的功能，在不同的项目中有...

PiscesYE 2019-08-26 11:31 评论0 收藏0
H5 canvas生成图片并上传文件转成PDF下载canvas文字排版

摘要：将预览的图片上传，后端生成，在管理系统中下载。技术要点文字排版设置指定背景颜色引入外部字体绘制文字图片将生成的图片转成上传这里根据后端协商，此处后端要求将图片生成，并点击批量下载实现步骤文字排版在一般容器中，如果要实现文字的排版很容易。最近遇到一个业务需求，在小程序端定制预览功能，并在预览的图片中使用指定的外部字体。将预览的图片上传OSS，后端生成PDF，在管理系统中下载。但是………...

canopus4u 2019-08-23 18:24 评论0 收藏0