如何使用javascript将旋转后的图像保存在本地下载文件夹中答案

【问题标题】：how to save the rotated image in the local downloads folder using javascript如何使用javascript将旋转后的图像保存在本地下载文件夹中
【发布时间】：2020-08-11 08:14:08
【问题描述】：

我有一个图像和旋转按钮的 onclick 图像得到旋转，旋转的图像 onclick 保存必须使用 javascript 或 jquery 下载。请给我答案如何保存旋转的图像。在这个我使用js和jquery

旋转图像的代码

var angle = 0,
  img = document.getElementById('id');
document.getElementById('rotatedown').onclick = function() {
  // $('.cropper-bg').css('display','none')
  angle = (angle + 270) % 360;
  img.className = "rotate" + angle;
  imgRotate = document.getElementById('id').src;
  // cropper = new Cropper(imgRotate);
  $('.saverotatedown').css('display', 'block')
  $('.saverotateright').css('display', 'none')
  $('.saverotateup').css('display', 'none')
  $('.saverotateleft').css('display', 'none')
  let save = document.querySelector(".saverotatedown")
  save.addEventListener('click', () => {
    let a = document.createElement('a');
    a.href = imgRotate;
    a.download = 'imaged.png';
    document.body.appendChild(a);
    a.click();
  });
  console.log(img.className, imgRotate);
}

<title>Image upload</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="https://skillrary.com/uploads/images/fav-sr-64x64-logo.png" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- 
    awesome.min.css" crossorigin="anonymous" rel="preconnect" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<img src="https://skillrary.com/uploads/images/f-sr-logo-195-50.png" id="id" /> 
<button id="rotatedown" class="rotateImgDiv"><i class="fa fa-undo" aria-hidden="true"></i> 
Rotate</button> 
<button class="btn saverotatedown" style="display: none">Save down</button>

【问题讨论】：

你试过localstorage吗？
不，但是图片正在下载，但不是旋转的图片

标签： javascript html jquery css bootstrap-4

【解决方案1】：

请求的图像是https://skillrary.com/uploads/images/f-sr-logo-195-50.png，所以当用户（通过浏览器）想要保存被操纵的图像时，它仍然请求原始图像。

与其直接使用 CSS 操作元素，不如尝试创建一个新的 Image 对象，对其进行操作并通过 JavaScript 在画布元素上提供它。可以在操纵状态下下载此图像。

在您的 HTML 中添加：

<div id="canvas"></div>

然后在你的 Javascript 中：

var img = new Image(); // Create new image

// Create a canvas element that will serve as where your image will be drawn.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Set the source of Image Object. 
img.src = 'https://skillrary.com/uploads/images/f-sr-logo-195-50.png';

// Perform your image manipulation here and finish it off with a drawImage();
ctx.drawImage(img, 0, 0);

更多信息可以在here找到。

【讨论】：