vue 中html5图片水印的代码
readLocalFile: function (index) {let reader = new FileReader();var localFile = document.getElementById("uploadFile_"+ index).files[0];va...
·
readLocalFile: function (index) {
let reader = new FileReader();
var localFile = document.getElementById("uploadFile_"+ index).files[0];
var content;
var current=this;
reader.readAsDataURL(localFile,"UTF-8"); //必须放在前面
reader.onload = function(event)
{
content = event.target.result;
var img = new Image();
img.src = content;
img.onload = function ()
{
var canvas = document.getElementById("canvasid");
var ctx = canvas.getContext("2d");
var hanzi = canvas.getContext("2d");
//图片下载完毕时异步调用callback函数。
ctx.drawImage(img, 0, 0, 300, 300); //圖片
hanzi.font = "29px 微软雅黑";
hanzi.fillStyle = "#ff9900";
hanzi.translate(50,100);
hanzi.rotate( 315* Math.PI/180);
//获取地点 时间 账户
var dataa=new Date();
hanzi.fillText(dataa.getFullYear()+"/"+(dataa.getMonth()+1)+"/"+dataa.getDate(),10,30);
hanzi.fillText( sessionStorage.getItem("users"),10,70); //用户信息
//获取当前位置
var sssss= canvas.toDataURL("image/png");
current.imgs[index].push(sssss); //获取图片base64代
hanzi.rotate( 45* Math.PI/180);
hanzi.translate(-50, -100);
};
}
更多推荐
已为社区贡献10条内容
所有评论(0)