Question

如何将画布图像另存为数据库并生成url

在生成要保存的图像或在提交表单时将画布上传到数据库后，我正在使用以下脚本来生成图像

我应该在上传脚本中使用HTML表单

function takeSnapshot(){
  // Here we're using a trick that involves a hidden canvas element.  

  var hidden_canvas = document.querySelector('canvas'),
      context = hidden_canvas.getContext('2d');

  var width = video.videoWidth,
      height = video.videoHeight;

  if (width && height) {

    // Setup a canvas with the same dimensions as the video.
    hidden_canvas.width = width;
    hidden_canvas.height = height;

    // Make a copy of the current frame in the video on the canvas.
    context.drawImage(video, 0, 0, width, height);

    // Turn the canvas image into a dataURL that can be used as a src for our photo.
    return hidden_canvas.toDataURL('image/png');

  }
}

 <canvas id="canvas" width="300" height="300"></canvas>

function takeSnapshot(){
  // Here we're using a trick that involves a hidden canvas element.  

  var hidden_canvas = document.querySelector('canvas'),
      context = hidden_canvas.getContext('2d');

  var width = video.videoWidth,
      height = video.videoHeight;

  if (width && height) {

    // Setup a canvas with the same dimensions as the video.
    hidden_canvas.width = width;
    hidden_canvas.height = height;

    // Make a copy of the current frame in the video on the canvas.
    context.drawImage(video, 0, 0, width, height);

    // Turn the canvas image into a dataURL that can be used as a src for our photo.
    return hidden_canvas.toDataURL('image/png');

  }
}

Answer 1

<html>
<header>
<script src="upload.js"></script>

<script>

var cnvs = document.getElementById('cnvs'),
ctx = cnvs.getContext('2d'),
mirror = document.getElementById('mirror');


cnvs.width = mirror.width = window.innerWidth;
cnvs.height = mirror.height = window.innerHeight;
</script>
<!-- That's basic HTML5 canvas setup, nothing new. Next is to bind an event listener to a 
right click on img#mirror.
-->

<script>
mirror.addEventListener('contextmenu', function (e) { });

mirror.addEventListener('contextmenu', function (e) {
var dataURL = canvas.toDataURL('image/png');
mirror.src = dataURL;
});

</script>

<!-- In this function, we'll parse the canvas to a data URL and set it as the image src. When the 
user chooses Save as in the context menu, the browser will show a file dialog, allowing the 
user to save the canvas visual to his computer.

->

</header>

<!--now to upload the image : -->





<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Upload Files</title>

</head>

<body>
<form method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <input type="submit" value="Upload File" name="submit">
</form>

<!-- Sending Form Data via JavaScript -->
<script> 

const url = 'process.php';
const form = document.querySelector('form');

form.addEventListener('submit', e => {
e.preventDefault();

const files = document.querySelector('[type=file]').files;
const formData = new FormData();

for (let i = 0; i < files.length; i++) {
    let file = files[i];

    formData.append('files[]', file);
}

fetch(url, {
    method: 'POST',
    body: formData
}).then(response => {
    console.log(response);
});
});

</script>

</body>

</html>

要使用javascript库，请访问此链接，其中有很多示例也可以帮助您做到这一点

https://fineuploader.com/demos.html

Answer 2

您有2个选择：

如果您使用toDataURL，则将图像作为Base64编码的数据上传，即一个简单的表单字段
如果您使用toBlob，则可以将图像作为二进制文件上传，这样您就可以使用$_FILES（如果后端使用PHP）

在两种情况下，您都将在AJAX请求中使用FormData：

var data = new FormData;
hidden_canvas.toBlob(sendImage, 'image/png');

function sendImage(blob_data)
{
  data.append('file_field', blob_data, 'snapshot_1.png');
  $.ajax( {
    url        : '/upload.php',
    type       : 'POST',
    contentType: false,
    cache      : false,
    processData: false,
    dataType   : 'json',
    data       : formData,
    success    : function (data) { ...... },
    error      : function (req, status, err) { ...... }
  });
}

如何将画布图像另存为数据库并生成URL

2 个答案: