Click image to trigger download in mobile browser
I try to add a feature that allow user to click a thumbnail and download the original picture to their computer or mobile phone from their browser.
I have successfully done it at desktop browser with <a href="source" download></a>.
However, this doesn't work with mobile browser apps like ios Safari, etc.
Does anyone know how to implement this for mobile browser?
Or is it available ?
I really need some help, thanks...
Note:
The image is totally from front-end.
The process is like:
1. Someone upload the image
2. Functions print image to canvas
3. Adding text using canvas API context
4. Output to image source from canvas
5. Download the source ( Issue is in this step)
javascript
asked Nov 20 at 7:04
Arel Lin
16219
add a comment |
I try to add a feature that allow user to click a thumbnail and download the original picture to their computer or mobile phone from their browser.
I have successfully done it at desktop browser with <a href="source" download></a>.
However, this doesn't work with mobile browser apps like ios Safari, etc.
Does anyone know how to implement this for mobile browser?
Or is it available ?
I really need some help, thanks...
Note:
The image is totally from front-end.
The process is like:
1. Someone upload the image
2. Functions print image to canvas
3. Adding text using canvas API context
4. Output to image source from canvas
5. Download the source ( Issue is in this step)
javascript
asked Nov 20 at 7:04
Arel Lin
16219
Can be donedone in two ways: 1. open image in new tab and then user long tap the image and save on his phone 2. from server side where you can use content-dispositionattachment
– Snake Eyes
Nov 20 at 7:07
Can click and auto-download be implemented if not from server side?
– Arel Lin
Nov 20 at 7:14
downloadattribute does not work on mobile: caniuse.com/#feat=download ...
– Snake Eyes
Nov 20 at 7:22
add a comment |
I try to add a feature that allow user to click a thumbnail and download the original picture to their computer or mobile phone from their browser.
I have successfully done it at desktop browser with <a href="source" download></a>.
However, this doesn't work with mobile browser apps like ios Safari, etc.
Does anyone know how to implement this for mobile browser?
Or is it available ?
I really need some help, thanks...
Note:
The image is totally from front-end.
The process is like:
1. Someone upload the image
2. Functions print image to canvas
3. Adding text using canvas API context
4. Output to image source from canvas
5. Download the source ( Issue is in this step)
javascript
asked Nov 20 at 7:04
Arel Lin
16219
I try to add a feature that allow user to click a thumbnail and download the original picture to their computer or mobile phone from their browser.
I have successfully done it at desktop browser with <a href="source" download></a>.
However, this doesn't work with mobile browser apps like ios Safari, etc.
Does anyone know how to implement this for mobile browser?
Or is it available ?
I really need some help, thanks...
Note:
The image is totally from front-end.
The process is like:
1. Someone upload the image
2. Functions print image to canvas
3. Adding text using canvas API context
4. Output to image source from canvas
5. Download the source ( Issue is in this step)
javascript
javascript
asked Nov 20 at 7:04
Arel Lin
16219
asked Nov 20 at 7:04
Arel Lin
16219
edited Nov 20 at 7:32
asked Nov 20 at 7:04
Arel Lin
16219
asked Nov 20 at 7:04
Arel Lin
16219
asked Nov 20 at 7:04
Arel Lin
16219
16219
Can be donedone in two ways: 1. open image in new tab and then user long tap the image and save on his phone 2. from server side where you can use content-dispositionattachment
– Snake Eyes
Nov 20 at 7:07
Can click and auto-download be implemented if not from server side?
– Arel Lin
Nov 20 at 7:14
downloadattribute does not work on mobile: caniuse.com/#feat=download ...
– Snake Eyes
Nov 20 at 7:22
add a comment |
Can be donedone in two ways: 1. open image in new tab and then user long tap the image and save on his phone 2. from server side where you can use content-dispositionattachment
– Snake Eyes
Nov 20 at 7:07
Can click and auto-download be implemented if not from server side?
– Arel Lin
Nov 20 at 7:14
downloadattribute does not work on mobile: caniuse.com/#feat=download ...
– Snake Eyes
Nov 20 at 7:22
Can be donedone in two ways: 1. open image in new tab and then user long tap the image and save on his phone 2. from server side where you can use content-disposition
attachment– Snake Eyes
Nov 20 at 7:07
Can be donedone in two ways: 1. open image in new tab and then user long tap the image and save on his phone 2. from server side where you can use content-disposition
attachment– Snake Eyes
Nov 20 at 7:07
Can click and auto-download be implemented if not from server side?
– Arel Lin
Nov 20 at 7:14
Can click and auto-download be implemented if not from server side?
– Arel Lin
Nov 20 at 7:14
download attribute does not work on mobile: caniuse.com/#feat=download ...– Snake Eyes
Nov 20 at 7:22
download attribute does not work on mobile: caniuse.com/#feat=download ...– Snake Eyes
Nov 20 at 7:22
add a comment |
1 Answer
1
active
oldest
votes
you should set name for atr download.
<a href="source" download="test.png"></a>
pay attention to source of image. if you use image from sub domain or other domain, this will not work.i think that its for security and browsers in new update not allow direct download from other origin.
i also set allow origin to sub domain in header of site, but its not work.
so the solution is:
use this tag in header of request of images. it is a sample that i used in asp.net
this.Response.AddHeader("Content-Disposition", "attachment; filename="" + dname + extention + """);
answered Nov 20 at 7:22
Pouriya Ghasemi
11
Ahh, sorry, I have to make the question more clear. Actually, the image src is totally from front-end. The process is like: 1. Someone upload the image 2. Functions print image tocanvas3. Adding text using canvas API context 4. Output to image source from canvas 5. Download the source ( Issue is in this step) Sorry for not mentioning this
– Arel Lin
Nov 20 at 7:29
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387831%2fclick-image-to-trigger-download-in-mobile-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
you should set name for atr download.
<a href="source" download="test.png"></a>
pay attention to source of image. if you use image from sub domain or other domain, this will not work.i think that its for security and browsers in new update not allow direct download from other origin.
i also set allow origin to sub domain in header of site, but its not work.
so the solution is:
use this tag in header of request of images. it is a sample that i used in asp.net
this.Response.AddHeader("Content-Disposition", "attachment; filename="" + dname + extention + """);
answered Nov 20 at 7:22
Pouriya Ghasemi
11
Ahh, sorry, I have to make the question more clear. Actually, the image src is totally from front-end. The process is like: 1. Someone upload the image 2. Functions print image tocanvas3. Adding text using canvas API context 4. Output to image source from canvas 5. Download the source ( Issue is in this step) Sorry for not mentioning this
– Arel Lin
Nov 20 at 7:29
add a comment |
you should set name for atr download.
<a href="source" download="test.png"></a>
pay attention to source of image. if you use image from sub domain or other domain, this will not work.i think that its for security and browsers in new update not allow direct download from other origin.
i also set allow origin to sub domain in header of site, but its not work.
so the solution is:
use this tag in header of request of images. it is a sample that i used in asp.net
this.Response.AddHeader("Content-Disposition", "attachment; filename="" + dname + extention + """);
answered Nov 20 at 7:22
Pouriya Ghasemi
11
Ahh, sorry, I have to make the question more clear. Actually, the image src is totally from front-end. The process is like: 1. Someone upload the image 2. Functions print image tocanvas3. Adding text using canvas API context 4. Output to image source from canvas 5. Download the source ( Issue is in this step) Sorry for not mentioning this
– Arel Lin
Nov 20 at 7:29
add a comment |
you should set name for atr download.
<a href="source" download="test.png"></a>
pay attention to source of image. if you use image from sub domain or other domain, this will not work.i think that its for security and browsers in new update not allow direct download from other origin.
i also set allow origin to sub domain in header of site, but its not work.
so the solution is:
use this tag in header of request of images. it is a sample that i used in asp.net
this.Response.AddHeader("Content-Disposition", "attachment; filename="" + dname + extention + """);
answered Nov 20 at 7:22
Pouriya Ghasemi
11
you should set name for atr download.
<a href="source" download="test.png"></a>
pay attention to source of image. if you use image from sub domain or other domain, this will not work.i think that its for security and browsers in new update not allow direct download from other origin.
i also set allow origin to sub domain in header of site, but its not work.
so the solution is:
use this tag in header of request of images. it is a sample that i used in asp.net
this.Response.AddHeader("Content-Disposition", "attachment; filename="" + dname + extention + """);
answered Nov 20 at 7:22
Pouriya Ghasemi
11
answered Nov 20 at 7:22
Pouriya Ghasemi
11
answered Nov 20 at 7:22
Pouriya Ghasemi
11
answered Nov 20 at 7:22
Pouriya Ghasemi
11
11
Ahh, sorry, I have to make the question more clear. Actually, the image src is totally from front-end. The process is like: 1. Someone upload the image 2. Functions print image tocanvas3. Adding text using canvas API context 4. Output to image source from canvas 5. Download the source ( Issue is in this step) Sorry for not mentioning this
– Arel Lin
Nov 20 at 7:29
add a comment |
Ahh, sorry, I have to make the question more clear. Actually, the image src is totally from front-end. The process is like: 1. Someone upload the image 2. Functions print image tocanvas3. Adding text using canvas API context 4. Output to image source from canvas 5. Download the source ( Issue is in this step) Sorry for not mentioning this
– Arel Lin
Nov 20 at 7:29
Ahh, sorry, I have to make the question more clear. Actually, the image src is totally from front-end. The process is like: 1. Someone upload the image 2. Functions print image to
canvas 3. Adding text using canvas API context 4. Output to image source from canvas 5. Download the source ( Issue is in this step) Sorry for not mentioning this– Arel Lin
Nov 20 at 7:29
Ahh, sorry, I have to make the question more clear. Actually, the image src is totally from front-end. The process is like: 1. Someone upload the image 2. Functions print image to
canvas 3. Adding text using canvas API context 4. Output to image source from canvas 5. Download the source ( Issue is in this step) Sorry for not mentioning this– Arel Lin
Nov 20 at 7:29
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387831%2fclick-image-to-trigger-download-in-mobile-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can be donedone in two ways: 1. open image in new tab and then user long tap the image and save on his phone 2. from server side where you can use content-disposition
attachment– Snake Eyes
Nov 20 at 7:07
Can click and auto-download be implemented if not from server side?
– Arel Lin
Nov 20 at 7:14
downloadattribute does not work on mobile: caniuse.com/#feat=download ...– Snake Eyes
Nov 20 at 7:22