Asp.net/Openlayers4: how Can I deblurr a canvas image?
0
I'm working on an asp.net project. I'm trying to take an image of the map using the following code:
map.once('postcompose', function (event) {
var img = document.getElementById("source");
event.context.canvas.getContext('2d').drawImage(img, event.context.canvas.width / 2 - img.width / 2, (event.context.canvas.height / 2 - img.height / 2)-20);
var canvas = event.context.canvas;
canvas.toBlob(function (blob) {
var reader = new FileReader();
reader.readAsDataURL(blob,1);
reader.onloadend = function () {
base64data = reader.result;
sendImage(base64data);
}
The image that i have is blurred, how can i deblurr it ?
The map lines are thinner than they appear in the image. Once i click the print button the lines become thicker
javascript asp.net openlayers
asked Nov 23 '18 at 14:16
s.es.e
3310
add a comment |
0
I'm working on an asp.net project. I'm trying to take an image of the map using the following code:
map.once('postcompose', function (event) {
var img = document.getElementById("source");
event.context.canvas.getContext('2d').drawImage(img, event.context.canvas.width / 2 - img.width / 2, (event.context.canvas.height / 2 - img.height / 2)-20);
var canvas = event.context.canvas;
canvas.toBlob(function (blob) {
var reader = new FileReader();
reader.readAsDataURL(blob,1);
reader.onloadend = function () {
base64data = reader.result;
sendImage(base64data);
}
The image that i have is blurred, how can i deblurr it ?
The map lines are thinner than they appear in the image. Once i click the print button the lines become thicker
javascript asp.net openlayers
asked Nov 23 '18 at 14:16
s.es.e
3310
If you addmap.on('postcompose',function() {console.log(new Date().getTime())});to your code will will probably see there are multiple postcompose events fired as the map renders (for the same simple map I get between 5 and 10). Waiting for the final image may give a better result than using the first.
– Mike
Nov 23 '18 at 16:36
How to wait for the final image?
– s.e
Nov 24 '18 at 6:11
1
In my test a series of postcompose events seems to fire less than 500ms apart as the map renders. Maybe set a timeout for 500ms on an event, if there is another event cancel and reset the timeout. When the timeout eventually fires the map will have been stable for 500ms and should be good to print.
– Mike
Nov 24 '18 at 10:32
add a comment |
0
0
0
I'm working on an asp.net project. I'm trying to take an image of the map using the following code:
map.once('postcompose', function (event) {
var img = document.getElementById("source");
event.context.canvas.getContext('2d').drawImage(img, event.context.canvas.width / 2 - img.width / 2, (event.context.canvas.height / 2 - img.height / 2)-20);
var canvas = event.context.canvas;
canvas.toBlob(function (blob) {
var reader = new FileReader();
reader.readAsDataURL(blob,1);
reader.onloadend = function () {
base64data = reader.result;
sendImage(base64data);
}
The image that i have is blurred, how can i deblurr it ?
The map lines are thinner than they appear in the image. Once i click the print button the lines become thicker
javascript asp.net openlayers
asked Nov 23 '18 at 14:16
s.es.e
3310
I'm working on an asp.net project. I'm trying to take an image of the map using the following code:
map.once('postcompose', function (event) {
var img = document.getElementById("source");
event.context.canvas.getContext('2d').drawImage(img, event.context.canvas.width / 2 - img.width / 2, (event.context.canvas.height / 2 - img.height / 2)-20);
var canvas = event.context.canvas;
canvas.toBlob(function (blob) {
var reader = new FileReader();
reader.readAsDataURL(blob,1);
reader.onloadend = function () {
base64data = reader.result;
sendImage(base64data);
}
The image that i have is blurred, how can i deblurr it ?
The map lines are thinner than they appear in the image. Once i click the print button the lines become thicker
javascript asp.net openlayers
javascript asp.net openlayers
asked Nov 23 '18 at 14:16
s.es.e
3310
asked Nov 23 '18 at 14:16
s.es.e
3310
asked Nov 23 '18 at 14:16
s.es.e
3310
asked Nov 23 '18 at 14:16
s.es.e
3310
asked Nov 23 '18 at 14:16
s.es.e
3310
3310
If you addmap.on('postcompose',function() {console.log(new Date().getTime())});to your code will will probably see there are multiple postcompose events fired as the map renders (for the same simple map I get between 5 and 10). Waiting for the final image may give a better result than using the first.
– Mike
Nov 23 '18 at 16:36
How to wait for the final image?
– s.e
Nov 24 '18 at 6:11
1
In my test a series of postcompose events seems to fire less than 500ms apart as the map renders. Maybe set a timeout for 500ms on an event, if there is another event cancel and reset the timeout. When the timeout eventually fires the map will have been stable for 500ms and should be good to print.
– Mike
Nov 24 '18 at 10:32
add a comment |
If you addmap.on('postcompose',function() {console.log(new Date().getTime())});to your code will will probably see there are multiple postcompose events fired as the map renders (for the same simple map I get between 5 and 10). Waiting for the final image may give a better result than using the first.
– Mike
Nov 23 '18 at 16:36
How to wait for the final image?
– s.e
Nov 24 '18 at 6:11
1
In my test a series of postcompose events seems to fire less than 500ms apart as the map renders. Maybe set a timeout for 500ms on an event, if there is another event cancel and reset the timeout. When the timeout eventually fires the map will have been stable for 500ms and should be good to print.
– Mike
Nov 24 '18 at 10:32
If you add
map.on('postcompose',function() {console.log(new Date().getTime())}); to your code will will probably see there are multiple postcompose events fired as the map renders (for the same simple map I get between 5 and 10). Waiting for the final image may give a better result than using the first.– Mike
Nov 23 '18 at 16:36
If you add
map.on('postcompose',function() {console.log(new Date().getTime())}); to your code will will probably see there are multiple postcompose events fired as the map renders (for the same simple map I get between 5 and 10). Waiting for the final image may give a better result than using the first.– Mike
Nov 23 '18 at 16:36
How to wait for the final image?
– s.e
Nov 24 '18 at 6:11
How to wait for the final image?
– s.e
Nov 24 '18 at 6:11
1
1
In my test a series of postcompose events seems to fire less than 500ms apart as the map renders. Maybe set a timeout for 500ms on an event, if there is another event cancel and reset the timeout. When the timeout eventually fires the map will have been stable for 500ms and should be good to print.
– Mike
Nov 24 '18 at 10:32
In my test a series of postcompose events seems to fire less than 500ms apart as the map renders. Maybe set a timeout for 500ms on an event, if there is another event cancel and reset the timeout. When the timeout eventually fires the map will have been stable for 500ms and should be good to print.
– Mike
Nov 24 '18 at 10:32
add a comment |
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53448318%2fasp-net-openlayers4-how-can-i-deblurr-a-canvas-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53448318%2fasp-net-openlayers4-how-can-i-deblurr-a-canvas-image%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
If you add
map.on('postcompose',function() {console.log(new Date().getTime())});to your code will will probably see there are multiple postcompose events fired as the map renders (for the same simple map I get between 5 and 10). Waiting for the final image may give a better result than using the first.– Mike
Nov 23 '18 at 16:36
How to wait for the final image?
– s.e
Nov 24 '18 at 6:11
1
In my test a series of postcompose events seems to fire less than 500ms apart as the map renders. Maybe set a timeout for 500ms on an event, if there is another event cancel and reset the timeout. When the timeout eventually fires the map will have been stable for 500ms and should be good to print.
– Mike
Nov 24 '18 at 10:32