如何获取包含用户的div的屏幕截图在前端上传图像？

Question

如何获取包含用户的div的屏幕截图在前端上传图像？

abi*_* er 10 javascript php jquery jquery-plugins css3

请参阅此代码.在下面的代码中,用户可以上传图像,可以移动,调整大小,旋转上传的图像等.

$(function() {
  var inputLocalFont = $("#user_file");
  inputLocalFont.change(previewImages);

  function previewImages() {
    var fileList = this.files;
    var anyWindow = window.URL || window.webkitURL;

    for (var i = 0; i < fileList.length; i++) {
      var objectUrl = anyWindow.createObjectURL(fileList[i]);
      var $newDiv = $("<div>", {
        class: "img-div"
      });
      var $newImg = $("<img>", {
        src: objectUrl,
        class: "newly-added"
      }).appendTo($newDiv);
      $(".new-multiple").append($newDiv);
      $newDiv.draggable();
      $newDiv.rotatable();
      $newDiv.resizable({
        aspectRatio: true,
        handles: "ne, nw, e, se, sw, w"
      });
      $newDiv.find(".ui-icon").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
      window.URL.revokeObjectURL(fileList[i]);
    }
    $(".newly-added").on("click", function(e) {
      $(".newly-added").removeClass("img-selected");
      $(this).addClass("img-selected");
      e.stopPropagation()
    });

    $(document).on("click", function(e) {
      if ($(e.target).is(".newly-added") === false) {
        $(".newly-added").removeClass("img-selected");
      }
    });
  }
   $(".user_submit").on("click",function(e){
   e.preventDefault();
   html2canvas($('.new-multiple'), {
     allowTaint: true,
	  onrendered: function(canvas) {
		document.body.appendChild(canvas);
		}
});
  
  
  });

});

Run Code Online (Sandbox Code Playgroud)

.new-multiple {
  width: 400px !important;
  height: 400px !important;
  background: white;
  border: 2px solid red;
  overflow: hidden;
}

.img-div {
  width: 200px;
  height: 200px;
}

.newly-added {
  width: 100%;
  height: 100%;
}

.img-selected {
  box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
  border: 2px solid rgb(145, 44, 94);
}


/*
.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
  background-color: white;
  border: 1px solid tomato;
}
*/

.ui-resizable-handle {
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  width: 14px;
  height: 14px;
}

.ui-resizable-nw {
  top: -7px;
  left: -7px;
}

.ui-resizable-ne {
  top: -7px;
  right: -7px;
}

.ui-resizable-e {
  top: calc(50% - 7px);
  right: -7px;
}

.ui-resizable-w {
  top: calc(50% - 7px);
  left: -7px;
}

.ui-resizable-sw {
  bottom: -7px;
  left: -7px;
}

.ui-resizable-se {
  right: -7px;
  bottom: -7px;
}

.ui-resizable-se.ui-icon {
  display: none;
}

.ui-rotatable-handle {
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  margin-left: calc(50% - 9px);
  bottom: -5px;
  width: 18px;
  height: 18px;
}

Run Code Online (Sandbox Code Playgroud)

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js"></script>
 <script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>

<form method="post" action="">


<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">

<div class="new-multiple"></div>
<input type="submit" name="submit" class="user_submit" value="submit" />
</form>

Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/s99kxydw/15/

上传图片后,旋转,移动,然后用户将按提交按钮.那时我们需要生成窗口的屏幕截图,这样用户和我们都可以理解用户完成了哪些更改.这是我们的要求.

我们如何生成此屏幕截图？

我们找到了一个解决方那是https://html2canvas.hertzen.com/html2canvas

但问题是html2canvas不支持css transform属性

结果是旋转不在屏幕截图中.我们怎么能骑过这个.请检查代码.

没有使用html2canvas还有其他方法吗？

Answer 1

Tom*_*zev 6

我理解你的问题是什么,因为我用html2canvas做了类似的事情.它的问题.是因为它无法保存所有内容所以它可能不完全准确,例如它无法进行css文本剪辑.这对我有用(我下载图像,但你可以轻松保存它,看看这个链接,如何做到这一点):

html2canvas($('.classOfElementToSave'), {
      allowTaint: true,
      onrendered: function(canvas) {
        var dataURL = canvas.toDataURL();
        $.ajax({
          type: "POST",
          url: "script.php",
          data: { 
             imgBase64: dataURL
          }
        }).done(function(o) {
          console.log('saved'); 
          // If you want the file to be visible in the browser 
          // simply return the url previously saved
    });
      }
  });

Run Code Online (Sandbox Code Playgroud)

然后在你的script.php或文件中(或你调用的任何文件):

$img = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $img); //Because saved as a data image
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
//saving the image to server
$fileName = 'image.png';
file_put_contents($fileName, $fileData);

Run Code Online (Sandbox Code Playgroud)

Answer 2

ɢʀᴜ*_*ᴜɴᴛ 6

html2canvas并没有支持大多数的CSS属性(除了基本的),其中一个是transform,你可能已经知道并且也没有解决方法(使用html2canvas)的不幸.

但是,你可以使用一个叫做一个JavaScript库的帆布FabricJS这似乎是最合适的,以满足您的目的,如操作(移动,缩放,旋转等),用户上传的图像(S) .

使用此库的最佳部分是,您不需要使用html2canvas或任何其他附加库来截取屏幕截图.您可以直接将画布(截屏)保存为图像,因为FabricJS本质上是一个画布库.

这是一个基本的例子,证明:

var canvas = new fabric.Canvas('myCanvas', {
   backgroundColor: 'white'
});

function renderImage(e) {
   var imgUrl = URL.createObjectURL(e.target.files[0]);
   fabric.Image.fromURL(imgUrl, function(img) {
      // set default props
      img.set({
         width: 150,
         height: 150,
         top: 75,
         left: 75,
         transparentCorners: false
      });
      canvas.add(img);
      canvas.renderAll();
   });
}

function saveOnPC() {
   var link = document.createElement('a');
   link.href = canvas.toDataURL();
   link.download = 'myImage.png';
   link.click();
}

function saveOnServer() {
   $.post('https://your-site-name.com/save-image.php', {
      data: canvas.toDataURL()
   }, function() {
      console.log('Image saved on server!');
   });

   /* use the following PHP code for 'save-image.php' on server-side

   <? php
   $img = $_POST['data'];
   $img = str_replace('data:image/png;base64,', '', $img);
   $img = str_replace(' ', '+', $img);
   $fileData = base64_decode($img);
   $fileName = 'myImage.png';
   file_put_contents($fileName, $fileData);
	
   */
}

Run Code Online (Sandbox Code Playgroud)

canvas{border:1px solid red}input{margin-bottom:6px}button{margin:10px 3px 0 0}

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" onchange="renderImage(event)">
<canvas id="myCanvas" width="300" height="300"></canvas>
<button onclick="saveOnPC()">Save on PC</button>
<button onclick="saveOnServer()">Save on Server</button>

Run Code Online (Sandbox Code Playgroud)

要了解更多关于FabricJS库是指它的官方文档.

Answer 3

gue*_*314 2

.src在@ValfarDeveloper之后，您可以将的值分配<img>给adata URI而不是a ，并设置字符串中a元素Blob URL的当前HTML 。".new-multiple"<foreignObject><svg>

$(function() {
  var inputLocalFont = $("#user_file");
  inputLocalFont.change(previewImages);

  async function previewImages() {
    var fileList = this.files;
    var anyWindow = window.URL || window.webkitURL;

    for (var i = 0; i < fileList.length; i++) {
      var objectUrl = await new Promise(resolve => {
        var reader = new FileReader;
        reader.onload = e => resolve(reader.result);
        reader.readAsDataURL(fileList[i]);
      });
      var $newDiv = $("<div>", {
        class: "img-div"
      });
      var $newImg = $("<img>", {
        src: objectUrl,
        class: "newly-added"
      }).appendTo($newDiv);
      $(".new-multiple").append($newDiv);
      $newDiv.draggable();
      $newDiv.rotatable();
      $newDiv.resizable({
        aspectRatio: true,
        handles: "ne, nw, e, se, sw, w"
      });
      $newDiv.find(".ui-icon").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
    }
    $(".newly-added").on("click", function(e) {
      $(".newly-added").removeClass("img-selected");
      $(this).addClass("img-selected");
      e.stopPropagation()
    });

    $(document).on("click", function(e) {
      if ($(e.target).is(".newly-added") === false) {
        $(".newly-added").removeClass("img-selected");
      }
    });
  }
   $(".user_submit").on("click",function(e){
   e.preventDefault();
   let html = $(".new-multiple").html();
   let svg = `<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 300">
    <foreignObject width="400px" height="300px" 
     requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
      <html xmlns="http://www.w3.org/1999/xhtml">
      ${html}
      </html>
      </foreignObject>
</svg>`;
  
    $("body").append(svg);
  
  });

});

Run Code Online (Sandbox Code Playgroud)

.new-multiple {
  width: 400px !important;
  height: 400px !important;
  background: white;
  border: 2px solid red;
  overflow: hidden;
}

.img-div {
  width: 200px;
  height: 200px;
}

.newly-added {
  width: 100%;
  height: 100%;
}

.img-selected {
  box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
  border: 2px solid rgb(145, 44, 94);
}


/*
.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
  background-color: white;
  border: 1px solid tomato;
}
*/

.ui-resizable-handle {
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  width: 14px;
  height: 14px;
}

.ui-resizable-nw {
  top: -7px;
  left: -7px;
}

.ui-resizable-ne {
  top: -7px;
  right: -7px;
}

.ui-resizable-e {
  top: calc(50% - 7px);
  right: -7px;
}

.ui-resizable-w {
  top: calc(50% - 7px);
  left: -7px;
}

.ui-resizable-sw {
  bottom: -7px;
  left: -7px;
}

.ui-resizable-se {
  right: -7px;
  bottom: -7px;
}

.ui-resizable-se.ui-icon {
  display: none;
}

.ui-rotatable-handle {
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  margin-left: calc(50% - 9px);
  bottom: -5px;
  width: 18px;
  height: 18px;
}

Run Code Online (Sandbox Code Playgroud)

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js"></script>
 <script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>

<form method="post" action="">


<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">

<div class="new-multiple"></div>
<input type="submit" name="submit" class="user_submit" value="submit" />
</form>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	979 次
最近记录：	8 年，7 月前