canvas 图像旋转问题

everccnight 2017-05-26 01:31:20
我想引入一个canvas 进行图像的旋转 代码如下
function rotateImg(direction) {

		var min_step = 0;

		var max_step = 3;

         var step = $(currentSource).attr("step");

        var id = $(".active")[0].id;

		if (step == null) {

			step = min_step;

		}

		if (direction == 'right') {

			step++;

            step > max_step && (step = min_step);

		} else {

			step--;

			step < min_step && (step = max_step);

		}

		$(currentSource).attr("step", step);

		var canvas = $("#canvas"+id)[0];

		var width = canvas.width;

		var height = canvas.height;

		var src = canvas.toDataURL("image/png");

		var img = new Image();

		var degree = step * 90 * Math.PI / 180;

		var ctx = canvas.getContext('2d');

		switch (step) {

			case 0:

				canvas.width = height;

				canvas.height = width;

				ctx.drawImage(currentSource, 0, 0,height,width);

				break;

			case 1:

				canvas.width = height;

				canvas.height = width;

				ctx.rotate(degree);

				ctx.drawImage(currentSource, 0, -height,width,height);

				break;

			case 2:

				canvas.width = height;

				canvas.height = width;

				ctx.rotate(degree);

				ctx.drawImage(currentSource, -height,-width ,height,width);

				break;

			case 3:

				canvas.width = height;

				canvas.height = width;

				ctx.rotate(degree);

				ctx.drawImage(currentSource, -width, 0,width,height);

				break;

		}

	}

其中currentSource使用一张图片 上面是可行代码
但是 我要图片在更改颜色 的时候 依旧可以旋转 于是 我便改成如下 代码 改过之后 发现 图片 不显示了 请问 为神马
function rotateImg(direction) {

		var min_step = 0;

		var max_step = 3;

         var step = $(currentSource).attr("step");

        var id = $(".active")[0].id;

		if (step == null) {

			step = min_step;

		}

		if (direction == 'right') {

			step++;

            step > max_step && (step = min_step);

		} else {

			step--;

			step < min_step && (step = max_step);

		}

		$(currentSource).attr("step", step);

		var canvas = $("#canvas"+id)[0];

		var width = canvas.width;

		var height = canvas.height;

		var src = canvas.toDataURL("image/png");

		var imgs;

		var img = new Image();

		img.src = src;

		img.setAttribute("step",step);

		imgs = img;

		var degree = step * 90 * Math.PI / 180;

		var ctx = canvas.getContext('2d');

		switch (step) {

			case 0:

				canvas.width = height;

				canvas.height = width;

				ctx.drawImage(imgs, 0, 0,height,width);

				break;

			case 1:

				canvas.width = height;

				canvas.height = width;

				ctx.rotate(degree);

				ctx.drawImage(imgs, 0, -height,width,height);

				break;

			case 2:

				canvas.width = height;

				canvas.height = width;

				ctx.rotate(degree);

				ctx.drawImage(imgs, -height,-width ,height,width);

				break;

			case 3:

				canvas.width = height;

				canvas.height = width;

				ctx.rotate(degree);

				ctx.drawImage(imgs, -width, 0,width,height);

				break;

		}

	}

欢迎大神 不吝赐教。
...全文
417 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
everccnight 2017-05-31
  • 打赏
  • 举报
 回复
有大神能帮我看下 代码错在哪里了吗 = =！
everccnight 2017-05-31
  • 打赏
  • 举报
 回复
就用这个图像来说 他的四次旋转是这样的 初始化 第一次 第二次 第三次
everccnight 2017-05-31
  • 打赏
  • 举报
 回复
引用 3 楼 jslang 的回复:
因为旋转过后，下次旋转是在上次旋转状态的基础上旋转的，就是说第一次旋转90度之后，第二次再旋转90度，实际就是旋转了180度。 你要在改变画布状态之前用ctx.save();保存当前状态，画完图片后再ctx.restore();恢复上次保存的状态 ctx.save();                     canvas.width = height;                     canvas.height = width;                     ctx.rotate(degree);                     ctx.drawImage(imgs, 0, -height,width,height); ctx.restore();
大神能说得详细点吗 我这边改了以后图像旋转还是有问题啊 这是我现在的代码 
function rotateImg(direction) {
		var min_step = 0;
		var max_step = 3;
         var step = $(currentSource).attr("step");
        var id = $(".active")[0].id;
		if (step == null) {
			step = min_step;
		}
		if (direction == 'right') {
			step++;
            step > max_step && (step = min_step);
		} else {
			step--;
			step < min_step && (step = max_step);
		}
		console.log(step);
		$(currentSource).attr("step", step);
		var canvas = $("#canvas"+id)[0];
		var width = canvas.width;
		var height = canvas.height;
		var src = canvas.toDataURL("image/png");
		var imgs;
		var img = new Image();
		img.src = src;
		img.setAttribute("step",step);
		imgs = img;
		imgs.onload = function () {  //图片要等其加载完成之后才能成在canvas中使用
			var degree = step * 90 * Math.PI / 180;
			var ctx = canvas.getContext('2d');
			switch (step) {
				case 0:
					canvas.width = height;
					canvas.height = width;
					ctx.drawImage(imgs, 0, 0,height,width);
					break;
				case 1:
					ctx.save();
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, 0, -height,width,height);
					ctx.restore();
					break;
				case 2:
					ctx.save();
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, -height,-width ,height,width);
					ctx.restore();
					break;
				case 3:
					ctx.save();
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, -width, 0,width,height);
					ctx.restore();
					break;
			}
		}


	}
天际的海浪 2017-05-31
  • 打赏
  • 举报
 回复
你每次用var src = canvas.toDataURL("image/png");获取的都是上一次旋转后的图片数据，不是原始图片。 你旋转都是按照原始图片旋转的，当然不对了
天际的海浪 2017-05-27
  • 打赏
  • 举报
 回复
因为旋转过后，下次旋转是在上次旋转状态的基础上旋转的，就是说第一次旋转90度之后，第二次再旋转90度，实际就是旋转了180度。 你要在改变画布状态之前用ctx.save();保存当前状态，画完图片后再ctx.restore();恢复上次保存的状态 ctx.save();                     canvas.width = height;                     canvas.height = width;                     ctx.rotate(degree);                     ctx.drawImage(imgs, 0, -height,width,height); ctx.restore();
everccnight 2017-05-27
  • 打赏
  • 举报
 回复
引用 1 楼 jslang 的回复:

		var imgs;
		var img = new Image();
		img.src = src;
		img.setAttribute("step",step);
		imgs = img;
		imgs.onload = function () {  //图片要等其加载完成之后才能成在canvas中使用
			var degree = step * 90 * Math.PI / 180;
			var ctx = canvas.getContext('2d');
			switch (step) {
				case 0:
					canvas.width = height;
					canvas.height = width;
					ctx.drawImage(imgs, 0, 0,height,width);
					break;
				case 1:
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, 0, -height,width,height);
					break;
				case 2:
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, -height,-width ,height,width);
					break;
				case 3:
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, -width, 0,width,height);
					break;
			}
		}
这样是能显示出来了 但是我旋转过后 图像显示 又有问题了 请问 是我原先写的就有问题吗··
天际的海浪 2017-05-26
  • 打赏
  • 举报
 回复 

		var imgs;
		var img = new Image();
		img.src = src;
		img.setAttribute("step",step);
		imgs = img;
		imgs.onload = function () {  //图片要等其加载完成之后才能成在canvas中使用
			var degree = step * 90 * Math.PI / 180;
			var ctx = canvas.getContext('2d');
			switch (step) {
				case 0:
					canvas.width = height;
					canvas.height = width;
					ctx.drawImage(imgs, 0, 0,height,width);
					break;
				case 1:
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, 0, -height,width,height);
					break;
				case 2:
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, -height,-width ,height,width);
					break;
				case 3:
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(imgs, -width, 0,width,height);
					break;
			}
		}
canvas图片旋转自适应容器宽度实践
canvas图片旋转，每次顺时针或逆时针旋转90度后，宽度自适应容器宽度，等比缩放
canvas 原位置旋转图片
如果不经过处理，在原点旋转的图片就看不到了。这里使用translate对原点进行移动，然后再旋转。这样就可以实现在原位置旋转图片了。代码一看就会。完整注释
手势解锁-canvas-javascript实战
掌握canvas基本用法;掌握手势解锁实现原理;得到注释详尽的源码;掌握canvas的学习方法
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
实现canvas 图片拖拽旋转移动 点击转成base64
使用hammer.js监听触控时产生的位移，并用Jcanvas.js画出来，从而实现在canvas画布内进行手势的拖拽 旋转 移动 缩放功能.点击按钮获取画布内的base64，并显示. 测试时请放在tomcat内，并手机访问. 不足：canvas加载图片缩放时有失真（前一个上传的demo则不失真） 优点:可双点触控 同时进行移动缩放旋转效果
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章