#176143 gửi bởi phonggio12c
Ngày 06 Tháng 04 2016 , 12:55
Kính gửi admin và mod cùng các bạn. Mình gặp 1 vấn đề rất lớn về code js(mình mày mò chứ ko học qua trường lớp nào):
1: Mình tạo được 1 bức ảnh trên web
2: Mình muốn lưu nó lại.

Giống:
Bạn chỉnh sửa ảnh trên photoshop online xong và ấn SAVE, nó sẽ lưu vào ổ đĩa cho các bạn
Nhưng:
Mình lại ko lưu được như thế, nó toàn hiện ra 1 popup, ấn chuột phải 2 lần chọn lưu ảnh mới lưu đc :((
Đoạn code đó như thế này:
trên file html:
<a id="print-button" class="btn btn-info" href="javascript: void(0);">LƯU ẢNH</a>
<script type="text/javascript">

...
$('#print-button').click(function(){
fpd.
saveImage();
return false;
});

...
</script
Trong 1 file js mình gọi:
this.saveImage = function() {

_deselectElement();

$productContainer.css('overflow', 'visible').parent().css('overflow', 'visible');
//render html to canvas
$productsDom.html2canvas({
onrendered: function (canvas) {
$productContainer.css('overflow', 'hidden').parent().css('overflow', 'hidden');
var popupHeight = $productContainer.height()*currentViews.length;
var popup = window.open('','','width='+$productContainer.width()+',height='+popupHeight+',location=no,menubar=no,scrollbars=yes,status=no,toolbar=no');
popup.document.title = "Save Image";
$(popup.document.body).append('<img src="'+canvas.toDataURL("image/png")+'" />');
}
});

};

Ý mình muốn:
Khi ấn vào LƯU ẢNH thì nó save thành 1 file ảnh được lưu trên ổ cúng luôn
Chứ không phải chuột phải => mở tab mới + Chuột phải => lưu hình ảnh
Kính mong mọi người giúp đỡ
Chân thành cảm ơn mọi người

#176157 gửi bởi phonggio12c
Ngày 07 Tháng 04 2016 , 00:25
Mình xây dựng 1 tool chỉnh sửa ảnh giống photoshop online.
đến đoạn lưu ảnh thì không được
có người nói đây là 1 biến ảnh, phải chuyển thành ảnh có dung lượng (byte) mới lưu được.
Code họ viết:

void saveImage2File(byte[] photo) { // Receive a photo as byte array
// Save Image to file
FileConnection fileConn = null;
DataOutputStream dos = null;


try {
fileConn = (FileConnection) Connector.open(
"file:///root1/story123.png");
if (!fileConn.exists()) {
fileConn.create();
}
dos = new DataOutputStream(fileConn.openOutputStream());
dos.write(photo);
dos.flush();
dos.close();
fileConn.close();


} catch (IOException ioe) {
System.out.println("Error!" + ioe);
}
}

Mọi người giúp chỉnh nên chỉnh code như thế nào thì mới SAVE ẢNH lại được nhé
#176175 gửi bởi hoaquynhtim99
Ngày 07 Tháng 04 2016 , 20:26
Bạn có thể sử dụng php ví dụ trong code của bạn bỏ đi cái đoạn
var popupHeight = $productContainer.height()*currentViews.length;var popup = window.open('','','width='+$productContainer.width()+',height='+popupHeight+',location=no,menubar=no,scrollbars=yes,status=no,toolbar=no');popup.document.title = "Save Image";$(popup.document.body).append('<img src="'+canvas.toDataURL("image/png")+'" />');
Thay vào đó là
window.location = 'getfile.php?data=' + encodeURIComponent(canvas.toDataURL("image/png"))
Trong file getfile.php
<?php$img_data = isset($_GET['data']) ? $_GET['data'] : '';//$img_data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';//$mime = nv_parse_ini_file(NV_ROOTDIR . 'includes/ini/mime.ini');//print_r($mime);die();unset($m);$file_info = preg_match("/^data\:(.*?)\;base64\,(.*?)/isU", $img_data, $m);if (!$file_info) { die('No file');}$file_name = 'abcd.png';$file_mime = trim($m[1]);$file_data = trim($m[2]);die($file_data);header('Content-Type: ' . $file_mime);header('Content-Disposition: attachment;filename="' . $file_name . '"');header('Cache-Control: max-age=0');die(base64_decode($file_data));
Trong ví dụ mình gắn cứng file tải về là png, để chạy được nhiều loại file bạn cần tra ra đuôi ảnh nữa:
png = image/pngpng = image/x-pnggif = image/gifgif = image/x-gifjpg = image/jpegjpg = image/x-jpegjpg = image/pjpegjpg = image/x-pjpegbmp = image/bmpbmp = image/x-bmpbmp = image/x-ms-bmptif = image/tifftiff = image/tifftiff = image/x-tiffjpe = image/jpegjpeg = image/jpegjfif = image/jpegico = image/x-iconico = image/vnd.microsoft.icon
Ví dụ một số đuôi ảnh ứng với mine


Hãy sống là chính mình, bình thường nhưng không tầm thường.
#176176 gửi bởi hoaquynhtim99
Ngày 07 Tháng 04 2016 , 20:45
Bạn copy mấy đoạn code của mình chịu khó bỏ vào trình format lại code cho dễ đọc, cái trình gắn code này chuối quá.

Hãy sống là chính mình, bình thường nhưng không tầm thường.
#176180 gửi bởi hoaquynhtim99
Ngày 07 Tháng 04 2016 , 22:25
Nếu GET không được bạn chuyển thành POST nhé, trong html của bạn thêm đoạn code thế này
<form action="getfile.php" id="getimgfile" style="display:none" method="post"> <textarea name="data" id="dataimgfile"></textarea></form>
Doạn này cũng bỏ đi
var popupHeight = $productContainer.height()*currentViews.length; var popup = window.open('','','width='+$productContainer.width()+',height='+popupHeight+',location=no,menubar=no,scrollbars=yes,status=no,toolbar=no'); popup.document.title = "Save Image"; $(popup.document.body).append('<img src="'+canvas.toDataURL("image/png")+'" />');
Thay vào đó là
$('#dataimgfile').html(canvas.toDataURL("image/png")).val(canvas.toDataURL("image/png"));$('#getimgfile').submit();
Trong file Trong file getfile.php sửa
$_GET
Thành
$_POST

Hãy sống là chính mình, bình thường nhưng không tầm thường.
#176189 gửi bởi phonggio12c
Ngày 08 Tháng 04 2016 , 02:57
Cảm ơn Phan Tấn Dũng rất nhiều, nhưng làm từ sáng tới h vẫn chưa được.
Để mình show đoạn code nguyên bản lên, bạn xem giùm mình, xin hậu tạ bạn.
file html nguyên bản:
<script src="http://localhost/nukeviet/1/new.js" type="text/javascript"></script>
<div id="content" >
<form action="http://localhost/nukeviet/1" id="recreation-form" method="post">
<div class="atcbutton" style="float:left; margin-left:70px">
<a id="save" class="btn btn-info" href="javascript: void(0);">Lưu ảnh</a>
</div>
</form>
</div>
<script type="text/javascript">
$('#save').click(function(){
fpd.saveImage();
return false;
});
</script>

file new.js nguyên bản:
...
this.saveImage = function() {
popup.document.title = "Save Image";
$(popup.document.body).append('<img src="'+canvas.toDataURL("image/png")+ />');
}
});

};

Nguyên lý hoạt động hiện tại của code trên:
1: Khi ta chỉnh sửa xong ảnh, thì
2: Ta sẽ ấn vào button LƯU ẢNH, ngay lúc này nó sẽ hiện ra 1 popup đã được gọi ra trong file new.js, trong popup này ta có thể coi lại ảnh đã được chỉnh sửa hoàn thiện.
Một số lưu ý:
1: id="recreation-form" phải để nguyên, vì nếu thay thì sẽ hỏng mất cái tool sửa ảnh (trắng trang hoặc báo lỗi luôn)
2: Đoạn mình bôi đỏ là mấu chốt vấn đề.
3: Bạn cũng biết rõ đoạn: <img src="'+canvas.toDataURL("image/png")+ /> chính là code sẽ show ảnh hoàn thiện, chắc chắn để nguyên, h mình chỉ việc thêm vào đâu, chỉnh sửa chỗ nào?
Với code của bạn, mình ngồi ngiên cứu rất kĩ, nhưng ko biết phải sửa sao cho phù hợp với code nguyên bản của mình.
Đó là toàn bộ vấn đề.
Một lần nữa trân trọng cảm ơn bạn, chắc chắn mình sẽ hậu tạ bạn!
Kính thư
#176197 gửi bởi hoaquynhtim99
Ngày 08 Tháng 04 2016 , 22:45
Sửa cái này
 </form> </div> <script type="text/javascript">
thành
 </form> </div><form action="getfile.php" id="getimgfile" style="display:none" method="post"><textarea name="data" id="dataimgfile"></textarea></form> <script type="text/javascript">
Thay cái này
popup.document.title = "Save Image";$(popup.document.body).append('<img src="'+canvas.toDataURL("image/png")+ />');
Thành
$('#dataimgfile').html(canvas.toDataURL("image/png")).val(canvas.toDataURL("image/png"));$('#getimgfile').submit();

Hãy sống là chính mình, bình thường nhưng không tầm thường.
#176199 gửi bởi phonggio12c
Ngày 09 Tháng 04 2016 , 05:15
Phan Tấn Dũng đã viết Sửa cái này
 </form> </div> <script type="text/javascript">
thành
 </form> </div><form action="getfile.php" id="getimgfile" style="display:none" method="post"><textarea name="data" id="dataimgfile"></textarea></form> <script type="text/javascript">
Thay cái này
popup.document.title = "Save Image";$(popup.document.body).append('<img src="'+canvas.toDataURL("image/png")+ />');
Thành
$('#dataimgfile').html(canvas.toDataURL("image/png")).val(canvas.toDataURL("image/png"));$('#getimgfile').submit();

Đã hiện link tải ảnh, nhưng có 2 vấn đề:
1: Link rất dài, ấn vào treo máy luôn, làm thế nào để link này ngắn gọn hơn, khoảng 40 50 kí tự thôi được không?
2: Sau khi có link ảnh rồi thì có đoạn code nào mà khi ta ấn vào button nó tải về máy được không?
Có lẽ sắp hoàn thiện hết rồi.
Xin cảm ơn bạn!