代码之家 › 专栏 › 技术社区 › KiKu

如何将画布图像保存为数据库和genrate url

html javascript

KiKu · 技术社区 · 7 年前

我正在使用下面的脚本在生成要在表单提交时保存或上载画布到数据库的图像后生成图像。

我应该使用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>

函数takeSnapshot()。{
//这里我们使用了一个涉及隐藏画布元素的技巧。

var hidden_canvas=document.queryselector(“canvas”),
context=hidden_canvas.getContext('2d');

var width=视频.video width,
高度=video.video height;

如果(宽度和高度){

//设置与视频尺寸相同的画布。
hidden_canvas.width=宽度;
hidden_canvas.height=高度;

//在画布上复制视频中的当前帧。
context.drawimage(视频,0,0,宽度,高度);

//将画布图像转换为可以用作照片的SRC的DataURL。
返回hidden_canvas.todataurl(“image/png”);

}
}

2 回复 | 直到 7 年前

IVO GELOV 7 年前

您有两种选择:

如果你使用 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) { ...... }
  });
}

marc_s MisterSmith 7 年前

<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.

---GT;

</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