jQuery Forum

How to load image and save to another page

in Using jQuery • 9 years ago

Hi all,

I need to read an image and save it but failed with strange issue.

The first step is to load with $.ajax and seems very simple.

$.ajax({
url : "http://www.izhaiyiqi.com/ce/tbtfscom/tbcaps/s.gif",
success: function(){
// second is to save it
}
});

s.gif is a one dot image. And I can see strings like "GIF89a��!�,D;". I thought it's the valid gif data and tried to transfer the data with $.ajax. But this is the second question.

The first thing I cannot explain is, if I visit "http://www.izhaiyiqi.com/ce/tbtfscom/tbcaps/s.gif" directly, it returns "R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" which seems to be something Base64 encoded. Why isn't it a valid image bytes array? I pretty sure that the image is OK.

Below is the snapshot of request header from Chrome.

Would be deeply appreciated if anybody helps.

Replies(21)

Re: How to load image and save to another page

9 years ago

Normally you would not use AJAX to read an image. I would use the load event on an <img>.

What do you want to do with the binary data of the image?

JΛ̊KE

Re: How to load image and save to another page

9 years ago

We should use <img> tag normally. But I need to read the binary data and save it to another site as I said which is the second question. And I want to know the first answer.

If I visit url "http://www.izhaiyiqi.com/ce/tbtfscom/tbcaps/s.gif" in chrome and press F12, I can see s.gif in tab Resource.

But if I press F12 first and visit the url, s.gif is not showed as image.

Is not it very weird?

Re: How to load image and save to another page

9 years ago

Image data can not be represented in a javascript string.

With the load event you can get the image data in many different formats. What do you want to do to that poor image?

JΛ̊KE

Re: Re: How to load image and save to another page

9 years ago

More, I won't output image data in string format and will send out directly instead. Actually, I encode image data with Base64, but... the first question has not been solved yet.

Re: How to load image and save to another page

9 years ago

I just want to save the poor image

I made a php page which will receive the data and save it with function file_put_contents. The request I send imagedata is like below. But I am not sure it causes issue since the first step doesn't work now.

$.ajax({
url : "http://www.izhaiyiqi.com/ce/tbtfscom/tbcap.php?act=test&r=" + Math.random(),
type : "POST",
data : {
imagedata : imagedata
}
});

Re: How to load image and save to another page

9 years ago

Why don't you write your PHP script such that it just receives the URL of the image, then it would fetch the image (server-to-server) and save it and just send confirmation to your client-side code.

Re: How to load image and save to another page

9 years ago

That looks like code to upload some data. Where does imagedata come from?

JΛ̊KE

Re: How to load image and save to another page

9 years ago

Jake, I could be wrong, but it appears to me he's trying to download an image from some remote server and then upload it to his server.

Re: Re: How to load image and save to another page

9 years ago

Your guess is as good as mine! I was prepared to show how to upload an image, process it, or even download and re-upload.

Too many unknowns.

JΛ̊KE

Re: Re: How to load image and save to another page

9 years ago

Godsbest, you bet right. It's a chrome extension which aims to save favorite image when surfing. Therefore, it's not OK to save in Php page. User should do something like click the image and send request.

Re: How to load image and save to another page

9 years ago

The next question is, when you say you want to save it, where do you want to save it or what do you mean? You might want to outline clearly what you want to do; now it sounds like you don't want the image on your server.

Re: Re: How to load image and save to another page

9 years ago

When user is browsing, he may want to save some favorite image with one click that is not save to local drive but cloud space instead.

So, I created a php which will receive image data and save to specific directory of the cloud space.

Generally, image from web site server A will be saved to cloud server B.

Thanks,

Re: How to load image and save to another page

9 years ago

Like I suggested earlier, if after the click event you can capture the image URL, that's all you need to pass to a modified PHP script. If the script is able to save the image, then it can be modified to fetch the image given the URL. What's wrong with this setup?

Re: Re: How to load image and save to another page

9 years ago

I will try to pass the image url later on.

But what and why the image data is modified is what I am caring about when fetching with js. I think there must be some rule to modify it back.

Take the s.gif as example, I decoded the the returned string "R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" and get something like "GIF89a!,D;" which is very possible to tell the raw data is GIF format though I don't know the reason and how to control the format/charset.

Again, I won't save the string, but want to pass the binary directly if possible.

watusiware

Re: How to load image and save to another page

9 years ago

I'd imagine his server doesn't have credentials to access the cloud server.

Nor would it necessarily have credentials to access the image. The user might be logged-in to some site where the images exist.

I think what they really want is to write a browser plugin. I don't see how this can be done in normal browser Javascript.

But just guessing, like everyone else...

Re: Re: How to load image and save to another page

9 years ago

He doesn’t have proper CORS headers, but as a browser add-in, he doesn’t need them.

I whipped together some code that might fake a file upload from an <img>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>up</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
/*
* JavaScript Canvas to Blob 2.0.5
* https://github.com/blueimp/JavaScript-Canvas-to-Blob
*
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*
* Based on stackoverflow user Stoive's code snippet:
* http://stackoverflow.com/q/4998908
*/
/*jslint nomen: true, regexp: true */
/*global window, atob, Blob, ArrayBuffer, Uint8Array, define */
(function (window) {
'use strict';
var CanvasPrototype = window.HTMLCanvasElement &&
window.HTMLCanvasElement.prototype,
hasBlobConstructor = window.Blob && (function () {
try {
return Boolean(new Blob());
} catch (e) {
return false;
}
}()),
hasArrayBufferViewSupport = hasBlobConstructor && window.Uint8Array &&
(function () {
try {
return new Blob([new Uint8Array(100)]).size === 100;
} catch (e) {
return false;
}
}()),
BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
window.MozBlobBuilder || window.MSBlobBuilder,
dataURLtoBlob = (hasBlobConstructor || BlobBuilder) && window.atob &&
window.ArrayBuffer && window.Uint8Array && function (dataURI) {
var byteString,
arrayBuffer,
intArray,
i,
mimeString,
bb;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
// Convert base64 to raw binary data held in a string:
byteString = atob(dataURI.split(',')[1]);
} else {
// Convert base64/URLEncoded data component to raw binary data:
byteString = decodeURIComponent(dataURI.split(',')[1]);
}
// Write the bytes of the string to an ArrayBuffer:
arrayBuffer = new ArrayBuffer(byteString.length);
intArray = new Uint8Array(arrayBuffer);
for (i = 0; i < byteString.length; i += 1) {
intArray[i] = byteString.charCodeAt(i);
}
// Separate out the mime component:
mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// Write the ArrayBuffer (or ArrayBufferView) to a blob:
if (hasBlobConstructor) {
return new Blob(
[hasArrayBufferViewSupport ? intArray : arrayBuffer],
{type: mimeString}
);
}
bb = new BlobBuilder();
bb.append(arrayBuffer);
return bb.getBlob(mimeString);
};
if (window.HTMLCanvasElement && !CanvasPrototype.toBlob) {
if (CanvasPrototype.mozGetAsFile) {
CanvasPrototype.toBlob = function (callback, type, quality) {
if (quality && CanvasPrototype.toDataURL && dataURLtoBlob) {
callback(dataURLtoBlob(this.toDataURL(type, quality)));
} else {
callback(this.mozGetAsFile('blob', type));
}
};
} else if (CanvasPrototype.toDataURL && dataURLtoBlob) {
CanvasPrototype.toBlob = function (callback, type, quality) {
callback(dataURLtoBlob(this.toDataURL(type, quality)));
};
}
}
if (typeof define === 'function' && define.amd) {
define(function () {
return dataURLtoBlob;
});
} else {
window.dataURLtoBlob = dataURLtoBlob;
}
}(this));
$(function(){
$("img").click(function(e){
var $canvas=$('<canvas>'),
canvas=$canvas[0],
src=this.src
$canvas.attr({width:this.width,height:this.height})
canvas.getContext('2d').drawImage(this,0,0,this.width,this.height)
canvas.toBlob(function(blob){
console.log(blob)
var fd= new FormData()
fd.append("imagedata",blob,src)
$.ajax({
url : "http://www.izhaiyiqi.com/ce/tbtfscom/tbcap.php?act=test&r=" + Math.random(),
type:"POST",
processData:false,
contentType: false,
data:fd,
success:function(){console.log("Succ",arguments)},
error:function(){console.log("Erro",arguments)}
})
},"image/jpeg",1)
})
})
</script>
<style>
</style>
</head>
<body>
<img src="x.jpg">
</body>
</html>

JΛ̊KE

Re: Re: How to load image and save to another page

9 years ago

I just thought chrome extension is powerful enougth to achieve this. Because local access is no required, browser plugin seems not so necessary.

Can anybody points out why image data gets converted if not referring with <img> tag?

Re: How to load image and save to another page

9 years ago

You get an image that is clicked on but it is not an img tag.

You try to load it with ajax, but you can’t get the proper buffer, just a string of malformed unicode.

If you check on your server, you should see an image that I uploaded. When I used my own server, I got a file.

JΛ̊KE

Re: How to load image and save to another page

9 years ago

Hi Jake,

Thanks a lot. I do see a new file in the server but it's 0 byte. Your codes inspire me and I will try it soon.

The key issue confusing me is, as you said "You try to load it with ajax, but you can’t get the proper buffer, just a string of malformed unicode, why can't we load the image", is it possible to restore the malformed unicode? I don't think it's a CORS restriction because this image is refered in it's own page and own site.

Chrome extension can embed contentscript which can access the whole DOM and sends request just from the page.

Regards,

Dola