图像效果到canvas图像不保存与php上传，但适用于下载相同的画布文件 [英] Image effects to canvas image not save with php upload but applies to download of same canvas file
本文介绍了图像效果到canvas图像不保存与php上传，但适用于下载相同的画布文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是一个显示问题的YouTube视频： https://www.youtube.com/watch?v=znzLQSYlsKM 。
Here is a youtube video showing the problem: https://www.youtube.com/watch?v=znzLQSYlsKM.
我提供视频说明中涉及的所有代码的链接。
I give links to all code involved in the video description.
用于将影响应用于图像的js库。然后我触发一个事件，给用户一个下载链接，并动态创建一个表单元素与base64的图像。然后我将其传递到一个php文件，并将其保存到一个文件夹。您可以下载的图像已应用效果，但保存的图像无效。问题是它们都是相同的确切文件。
I'm using a js library to apply affects to an image. Then I'm triggering an event that gives the user a download link, and dynamically creates a form element with the base64 for the image. I then pass that to a php file and save it to a folder. The image you can download has the effect applied to it, but the one that is saved is saved without the effect. The problem is they are both the same exact file.
JS代码：
function showDownload(canvas){
//this is how i send it to my main page and use ajax script to upload to the php file.
var url = canvas.toDataURL("image/png;base64;");
$('<input/>').attr({
type: 'hidden', id: 'fileroast', name: 'fileroast', value: url
}).appendTo('#output');
// this is how i link the download file
downloadImage.off('click').click(function(){
var url = canvas.toDataURL("image/png;base64;");
downloadImage.attr('href', url);
}).fadeIn();
}
过滤器代码：
filters.click(function(e){
e.preventDefault();
var f = $(this);
if(f.is('.active')){
// Apply filters only once
return false;
}
filters.removeClass('active');
f.addClass('active');
// Clone the canvas
var clone = originalCanvas.clone();
// Clone the image stored in the canvas as well
clone[0].getContext('2d').drawImage(originalCanvas[0],0,0);
// Add the clone to the page and trigger
// the Caman library on it
photo.find('canvas').remove().end().append(clone);
var effect = $.trim(f[0].id);
Caman(clone[0], function () {
// If such an effect exists, use it:
if( effect in this){
this[effect]();
this.render();
showDownload(clone[0]);
}
else{
hideDownload();
}
});
});
// Use the mousewheel plugin to scroll
// scroll the div more intuitively
filterContainer.find('ul').on('mousewheel',function(e, delta){
this.scrollLeft -= (delta * 50);
e.preventDefault();
});
推荐答案
这是答案。
function submitForm() {
var fd = '';
if(get_user != logged_username){
}else{
var d = new Date();
var time = d.getTime();
var fd = new FormData(document.getElementById("fileinfo"));
$.ajax({
url: "upload_photo.php",
type: "POST",
data: fd,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( data ) {
if (data.indexOf("Invalid") >= 0) {
alert('invalid file type, must be jpeg, jpg, or png.');
}else{
console.log(data);
var post = {"pic_location":data, "time":time, "username": logged_username};
var json_data = post;
Cynergi.insert('http://thewaywardjourney.com:3000/profile_pictures', json_data);
$( "#fileroast" ).remove();
//this is where we save the photos location to the db for retrieveal.
}
});
return false;
}
}
script.js
script.js
var apply = $('#apply');
function showDownload(canvas){
apply.off('click').click(function(){
var url = canvas.toDataURL("image/png;base64;");
$('<input/>').attr({type: 'hidden', id: 'fileroast', name: 'fileroast', value: url}).appendTo('#output');
console.log(url);
console.log('apply');
}).fadeIn();
}
function hideDownload(){
downloadImage.fadeOut();
}
modal hhtml
modal hhtml
<div id="uploadPic" class="modal fade" >
<form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background:#f3f3f3;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" style="color:black;">Choose picture to upload as profile pic.</h4>
</div>
<div class="modal-body">
<div id="photo">
</div>
<div id="filterContainer" style='width:400px;'>
<ul id="filters" style='width:400px;'>
<li> <a href="#" id="normal">Normal</a> </li>
<li> <a href="#" id="vintage">Vintage</a> </li>
<li> <a href="#" id="lomo">Lomo</a> </li>
<li> <a href="#" id="clarity">Clarity</a> </li>
<li> <a href="#" id="sinCity">Sin City</a> </li>
<li> <a href="#" id="sunrise">Sunrise</a> </li>
<li> <a href="#" id="crossProcess">Cross Process</a> </li>
<li> <a href="#" id="orangePeel">Orange Peel</a> </li>
<li> <a href="#" id="love">Love</a> </li>
<li> <a href="#" id="grungy">Grungy</a> </li>
<li> <a href="#" id="jarques">Jarques</a> </li>
<li> <a href="#" id="pinhole">Pinhole</a> </li>
<li> <a href="#" id="oldBoot">Old Boot</a> </li>
<li> <a href="#" id="glowingSun">Glowing Sun</a> </li>
<li> <a href="#" id="hazyDays">Hazy Days</a> </li>
<li> <a href="#" id="herMajesty">Her Majesty</a> </li>
<li> <a href="#" id="nostalgia">Nostalgia</a> </li>
<li> <a href="#" id="hemingway">Hemingway</a> </li>
<li> <a href="#" id="concentrate">Concentrate</a> </li>
</ul>
</div>
<div id='output_file'></div>
<div id="output"></div>
</div>
<div class="modal-footer">
<button id='apply' class="btn btn-info">Upload</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
php
<?php
// requires php5
define('UPLOAD_DIR', 'images/profile_images/');
$img = $_POST['fileroast'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$files = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($files, $data);
print $files;
//print $file ? 'default':'images/profile_images/default.png';
?>
这篇关于图像效果到canvas图像不保存与php上传，但适用于下载相同的画布文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
