上传图片,前端直接转base64格式图片数据,并canvas画出来_Html教程_奇迪科技(深圳)有限公司(www.qvdv.com)

欢迎来到奇迪科技(深圳)有限公司,超值服务提供卓越产品!

Html教程

上传图片,前端直接转base64格式图片数据,并canvas画出来

作者:qvdv 来源:www.qvdv.com更新时间:2018-12-14

这里讲到两个关键问题点:

1、上传图片,在前端转为base64格式,用到的是FileReader()函数;

2、canvas画图。

直接上代码:

<input type="file" style="display: none" id="file" onClick="up()">
<canvas id="canvas"></canvas>
<script type="text/javascript">
function up(){
var reader = new FileReader();
var file = $(this)[0].files[0];
var imgUrlBase64;
if (file) {
reader.readAsDataURL(file);//将文件以Data URL形式读入页面  
reader.onload = function (e) {
//这就是base64格式图片数据
imgUrlBase64= e.target.result; 
//imgUrlBase64= imgUrlBase64.substring(imgUrlBase64.indexOf(",") + 1);//截取base64码部分(是否有必要,看需求)
// canvas
//获取canvas元素
var cvs = document.getElementById("canvas");
//创建image对象
var imgObj = new Image();
imgObj.src = imgUrlBase64;
//待图片加载完后,将其显示在canvas上 
imgObj.onload = function(){
var ctx = cvs.getContext('2d');
ctx.clearRect(0,0,imgObj.width,imgObj.height);
ctx.drawImage(this, 0, 0);
//this即是imgObj,保持图片的原始大小
//ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768 
}; 
}
}
}
</script>

本文版权所有,转载须注明:来源  https://www.qvdv.com/qvdv-wdl-865.html