canva旋转图片 js_js和canvas实现旋转图片

//点击向左向右旋转图片

window.οnlοad=function(){

var Img=document.getElementById(‘img’);

var inPut=document.getElementsByTagName(‘input’);

var num=0;

//加载图片

var newImg= new Image();

newImg.onload =function(){

draw(Img);

};

newImg.src=Img.src;

function draw(obj){

//创建一个画布

var oc=document.createElement('canvas');

var pc=oc.getContext('2d');

oc.width =obj.width;

oc.height = obj.height;

obj.parentNode.replaceChild(oc,obj);

pc.drawImage(obj,0,0);

inPut[1].οnclick=function(){

num++;

if(num>3){

num=0;

}

change();

}

inPut[0].οnclick=function(){

num--;

if(num<0){

num=3;

}

change();

}

function change(){

switch(num){

case 1:

oc.width = obj.height;

oc.height =obj.width;

pc.rotate(90*Math.PI/180);

pc.drawImage(obj,0,-obj.height);

break;

case 2:

oc.width =obj.width ;

oc.height =obj.height;

pc.rotate(180*Math.PI/180);

pc.drawImage(obj,-obj.width,-obj.height);

break;

case 3:

oc.width = obj.height;

oc.height =obj.width;

pc.rotate(270*Math.PI/180);

pc.drawImage(obj,-obj.width,0);

break;

case 0:

oc.width =obj.width ;

oc.height =obj.height;

pc.rotate(360*Math.PI/180);

pc.drawImage(obj,0,0);

break;

}

本文来源于网络：查看 >https://blog.csdn.net/qq_40791594/article/details/82736403

canva旋转图片 js_js和canvas实现旋转图片相关推荐

js大屏导出图片_js将canvas保存成图片并下载
保存 var arr = [ {locations:[[0,0],[200,200],[0,400]],color:"red"}, {locations:[[0,0],[400,0 ...
html5 图片粒子效果,Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图片是通过im ...
html canvas保存为图片,在HTML5 Canvas中放入图片和保存为图片的方法
第一种方式如果是使用的图片的话,就会涉及到canvas的图片跨域问题,因为canvas是禁止跨域的,如果图像来自其他域,调用toDataURL()会抛出一个错误需要添加"img.cros ...
vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...
canva旋转图片 js_js 使用canvas 旋转图片
最左边是原始图片,中间是canvas内容,右边是将canvas内容导出到img标签中 canvas绘图时,确定图片的原始尺寸,不是显示的dom大小,需要创建元素后获得如果使用dom大小的话,会在绘制 ...
js 图片打碎_html5 canvas打碎的图片玻璃碎片特效
特效描述:html5canvas 打碎的图片玻璃碎片特效.玻璃碎片特效代码结构 1. 引入JS 2. HTML代码 var imageWidth = 768, imageHeight = 485; ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（1）
文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)--滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（2）
文章过长,一篇无法保存 IE下及标准浏览器下的图片旋转(二)-- Canvas(1) 同样,作为最后,我们使用使用jquery也为canvas写个旋转demo: javascript: $(funct ...
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) - 可编辑图片指定区域位置
注: 苹果手机升级IOS14.1系统后,出现图片写入不了CANVAS画布问题解决方法:alloy_paper.js 文件查找代码: this.img.crossOrigin = "Anon ...

canva旋转图片 js_js和canvas实现旋转图片

canva旋转图片 js_js和canvas实现旋转图片相关推荐

最新文章

热门文章