canva旋转图片 js_js 使用canvas 旋转 图片
最左边是原始图片,中间是canvas内容,右边是将canvas内容导出到img标签中
canvas绘图时,确定图片的原始尺寸,不是显示的dom大小,需要创建元素后获得
如果使用dom大小的话,会在绘制时只能绘制出一部分
canvas目前的感觉是分为绘图层和展示层
旋转和移动的是绘图层的中心
展示层呈现内容,大小也是展示层的大小
Title
.img {
width: 300px;
border: 1px solid black;
}
旋转
let degree = 0;
const sourceImg = document.getElementById('source');
const targetImg = document.getElementById('target');
const rotationCanvas = document.getElementById('rotationCanvas');
function getSize(url) {
return new Promise((resolve) => {
let img = document.createElement('img');
img.onload = () => {
resolve({
width: img.width,
height: img.height,
});
};
img.src = url;
});
}
async function rotation() {
let d = (degree * Math.PI) / 180;
degree += 30;
console.log(d);
let image = sourceImg;
let size = await getSize(sourceImg.src);
console.log('size', size);
const canvasWidth = size.width;
const canvasHeight = size.height;
rotationCanvas.width = canvasHeight;
rotationCanvas.height = canvasWidth;
let surfaceContext = rotationCanvas.getContext('2d');
surfaceContext.clearRect(0, 0, rotationCanvas.width, rotationCanvas.height);
surfaceContext.save();
// Translate to the center point of our image
surfaceContext.translate(canvasHeight * 0.5, canvasWidth * 0.5);
// Perform the rotation
surfaceContext.rotate(d);
// Translate back to the top left of our image
// surfaceContext.translate(-image.width * 0.5, -image.height * 0.5);
// Finally we draw the image
// surfaceContext.drawImage(image, -image.width * 0.5, -image.height * 0.5);
surfaceContext.drawImage(image, -canvasWidth / 2, -canvasHeight / 2);
// surfaceContext.drawImage(image, canvasWidth/2, canvasHeight/2);
// rotationCanvas.style.width = canvasHeight + 'px'
// rotationCanvas.style.height = canvasWidth + 'px'
surfaceContext.restore();
// surfaceContext.scale(.5, .5)
targetImg.src = rotationCanvas.toDataURL();
}
rotation();
function getBase64(img) {
console.log('img', img, canvasWidth, canvasHeight);
canvas.width = canvasWidth;
canvas.height = canvasHeight;
ctx.drawImage(img, 0, 0, img.width, img.height);
return canvas.toDataURL();
}
canva旋转图片 js_js 使用canvas 旋转 图片相关推荐
- glide加载图片闪烁_html5 canvas绘制图片
举两个新手(我)比较容易范的错误 1.图片声明了,绘制方法也ok了,但是有的时候就可以显示出来,有的时候就显示不出来 function draw(){var c=document.getElement ...
- html验证码图片,js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下 实现效果 一.使用技术 原生js技术+html5 canvas画图 利用Math.random()函数随 ...
- canva旋转图片 js_js和canvas实现旋转图片
//点击向左向右旋转图片 window.οnlοad=function(){ var Img=document.getElementById('img'); var inPut=document.ge ...
- html去除图片背景颜色,canvas实现图片背景色去色变透明 » 张鑫旭-鑫空间-鑫生活...
CSS代码: h4 + canvas { cursor: crosshair; } canvas { background: url(./tt-bg.gif); } HTML代码: 左取色图,右效果图 ...
- python画布添加背景图片_Python 设置 Canvas 背景图片且支持全屏显示
图1 全屏显示图片 由于 PhotoImage 若没有被引用,便会自动销毁,所以需要显示的引用它: from tkinter import Tk, Canvas from PIL import Ima ...
- html坐标截取图片,JavaScript+html5 canvas实现本地截图教程
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传&l ...
- IE下及标准浏览器下的图片旋转(二)—— Canvas(1)
文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)--滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas ...
- IE下及标准浏览器下的图片旋转(二)—— Canvas(2)
文章过长,一篇无法保存 IE下及标准浏览器下的图片旋转(二)-- Canvas(1) 同样,作为最后,我们使用使用jquery也为canvas写个旋转demo: javascript: $(funct ...
- html让图片自动旋转360,html5 canvas 360图片旋转制作抽奖转盘代码
特效描述:html5canvas 360图片旋转 抽奖转盘代码.60图片旋转制作抽奖转盘代码 代码结构 1. HTML代码 var colors = ["#B8D430", &qu ...
最新文章
- HashMap 1.7 死循环过程
- 前端学习(2834):样式引入
- CGLib动态代理原理
- 如何选择bfs和dfs
- bootstrap分割式下拉菜单显示不全
- 电梯调度 matlab,数学建模电梯调度问题.pdf
- jz2440移植QT5.6【学习笔记】【原创】
- 自己实践的mac安装python3Linux安装python3
- 【企业绩效考核系统】
- 空域、频域、时域的解释
- Hadoop(一)如何搭建大数据Hadoop集群?(大数据入门教程)
- 中国心率监测器行业市场供需与战略研究报告
- Xmind思维导图 常用快捷键使用
- 卖奥特曼卡片年入十亿:赚钱这事,你还得相信光的力量
- Java——因式分解算法
- 马云:曾去肯德基面试25人就我没被录用 30多年彷徨成就今天
- Storyboard Animations
- 数据库sqlite3的安装与应用
- 【解决密码栏不显示】“可能是其他人在试图访问您的google账号....”
- 开源ERP系统Odoo16测试版发布
热门文章
- 色差仪在五金行业颜色品质管控的应用
- 【PR】关于字幕的一系列设置
- 从github上下载的vue项目如何运行
- 使用 React.js 开发 Chrome 插件
- 崴泥篇——Thymeleaf 报错:ERROR 8592 org.thymeleaf.TemplateEngine
- [游戏]紫冰服务器发布
- ConstraintTools...
- 服务商模式支付签名验证失败php,服务商模式小程序支付签名失败,请求管理员和大牛解决!!!...
- leetcode 11:旋转数组的最小数字
- [PTA]实验8-2-5 判断回文字符串