canvas图片旋转和转出blob图片流

最新推荐文章于 2024-05-21 14:23:00 发布

weixin_40601606

最新推荐文章于 2024-05-21 14:23:00 发布

阅读量888

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_40601606/article/details/130323002

版权

canvas图片旋转

// 画布宽400,高300
let img = document.getElementById('img')
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext("2d")
// 修改图片原点位置
ctx.translate(200, 150)			// 1
// 旋转图片角度以下两种方式都可旋转
//ctx.rotate(90 *Math.PI / 180)
ctx.rotate(-Math.PI / 4)		// 2
// 修改图片原点创建后偏移的位置
ctx.drawImage(img, -200, -150)
// 恢复设置（恢复的步骤要跟你修改的步骤向反）
ctx.rotate(Math.PI / 4)			// 1
ctx.translate(-200, -150)		// 2
// 之后canvas的原点又回到左上角，旋转角度为0
// 其它操作...

canvas笔迹的回显展示

const biji = [ {x:** ,y:**},......... ]
// 笔迹坐标可在一笔绘画结束后添加属性值end:true标注当前一笔的笔画结束
for (let i = 0; i < biji.length; i++) {
   ctx.beginPath();
   if(!biji[i].end){
       ctx.moveTo(biji[i].x, biji[i].y)
       ctx.lineTo(biji[i + 1].x, biji[i + 1].y)
   } else {
       continue
   }
   ctx.stroke();
   ctx.beginPath()
}

canvas画布转图片流 (blob)或直接下载等参考canvas API

blob转File文件提交后台参考API

// 新建form对象
let form = new FormData()
// blob转换File文件
const file = new File([blob],'自定义文件名')
// file可以append执行多个，但不可以设置为JSON数组内多个file如:[File,File,....]
form.append('files',file)