Image result not correctly in Mac retina display about screenshot-capture HOT 36 CLOSED

I don't own a monitor with such high resolution/dpi, nor do I have a Mac, so I probably won't be able to reproduce it on my end.

You can at least do the following:

1. Switch to Crop and Wait mode
2. Select some area for cropping and take a screenshot of your entire window with external app
3. Save the selected area for cropping with the extension
4. Post both screenshots here

from screenshot-capture.

entire window of cropping some area
https://upload.cc/i3/oAuYaw.png

result of image
https://upload.cc/i/C4Qzb6.png

from screenshot-capture.

It looks like there is a way to detect the retina display, which is good. I'll try to reproduce it on my end, and I'll let you know when I have something ready to test.

from screenshot-capture.

also when save the selected area, the file of image missing the extension
here is my solution

./content/content.js

function save (image) {
    document.location.href = image.replace('image/png', 'image/octet-stream')
}

replace to

function save (image) {
    var link = document.createElement('a');
    link.download = "download.png";
    link.href = image.replace('image/png', 'image/octet-stream');
    link.click();
}

from screenshot-capture.

I'll try that out, this is on my todo list too 👍

from screenshot-capture.

BTW the code responsible for cropping the image is located in background.js - drawImage. My best bet is that the crop area passed from the web page should be scaled there. Then the only thing left would be to detect the higher dpi inside the web page and pass it to the background page along with the cropping information.

from screenshot-capture.

agree, i find someone got this problem too in stackoverflow
http://stackoverflow.com/questions/32013884/chrome-extension-screenshot-partial-image-cropping-for-retina-display

from screenshot-capture.

@iamkwan can you try something for me?

I am assuming that you already know how to clone this repo and the extensions as unpacked one.

Can you modify this code in background.js:

context.drawImage(img,
  left * 2, top * 2,
  width * 2, height * 2,
  0, 0,
  width * 2, height * 2
)

And then reload the extension and crop something.

2 here should be the same as executing window.devicePixelRatio in your browser console, but it's most probably 2. I'm yet to find a way to reliably reproduce the dpi stuff on my end, so if that works for you I'll push a fix and ask you to test again.

If anything fails post screenshots here. Thanks!

from screenshot-capture.

still not match

entire window of cropping some area
https://upload.cc/i3/Es1hqY.png

result of image
https://upload.cc/i/Kh8Esi.png

from screenshot-capture.

The top left corner is in the correct place, but it looks like the width and the height should be multiplied by 4 Definitely weird, I'll let you know if I come up with something else.

from screenshot-capture.

also when I try to crop in jcrop demo page
the position of crop is wrong, maybe the jcrop demo page have some class or id same with this extension?

I have a idea, when click the extension, capture the current screen and send the data image to new tab to let user crop

update: i think this idea not good, cropping in current page is better

from screenshot-capture.

@iamkwan can you pull the fix-dpi branch and test, I think I finally got it.

from screenshot-capture.

@simov the problem was solve, but i think i will change the resolution of the cropped image from retina to normal
I have one question, do you know how to insert some text center in the screen? for example when user click the extension icon to trigger the jcrop, then insert the text in the screen without draw canvas (eg. Select Area), when user onmousedown, the text will hide.

from screenshot-capture.

but i think i will change the resolution of the cropped image from retina to normal

I think in this case the image will look smaller on your high dpi monitor. I should probably add this as an option in the options page.

For your second question: It should be pretty easy to add such message to the web page.

The best way to indicate that the extension is ready for cropping is to dim the page a little bit, like it's done in the jcrop demo, but the problem is that this approach doesn't play well with the extension. Simply because there is no background image to set opacity on. Trust me I've spent a good amount of time on that and there is no apparent way to do it.

from screenshot-capture.

Not smaller, is the quality lower in my retina display when I change from
retina to normal
In the fix-pixel extension, when I crop the image
Eg. 300x300
But the result is retina image, so the width and high of result image is
more than 300x300
On Nov 11, 2016 9:12 PM, "simo" [email protected] wrote:

but i think i will change the resolution of the cropped image from retina
to normal

I think in this case the image will look smaller on your high dpi monitor.
I should probably add this as an option in the options page.

For your second question: It should be pretty easy to add such message to
the web page.

The best way to indicate that the extension is ready for cropping is to
dim the page a little bit, like it's done in the jcrop demo, but the
problem is that this approach doesn't play well with the extension. Simply
because there is no background image to set opacity on. Trust me I've spent
a good amount of time on that and there is no apparent way to do it.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIfvVvIAlmssMXKtcDNFaM7cceboWnD1ks5q9GnBgaJpZM4KrMRA
.

from screenshot-capture.

Yep, I'm going to add this as an option to this branch. I'll let you know when it's ready to test it.

from screenshot-capture.

I also like your idea about using some other sort of indication when the extension is ready to crop. I'll think about it but this will most probably be implemented in the next version, after I publish the DPI fix and the option to preserve the size of the cropped area.

from screenshot-capture.

also when i try to insert element (eg. button) into screen when jcrop onSelect, but when i try to click the element, it trigger jcrop, cannot trigger the element onclick, even i set this element to z-index: 999999999

from screenshot-capture.

It depends on where you insert the element :)

from screenshot-capture.

@simov LOL my mistake, it can trigger my function now

from screenshot-capture.

@simov do you know how to detect when user move the crop box without using onChange?

from screenshot-capture.

I don't think there is a default event for that (changing the top/left position of a DOM element).

from screenshot-capture.

finally i use this if condition inside onChange even to detect user is cropping image not just click the area of the screen, because when user just click the crop box it will trigger onChange too
if(oldx != e.x || oldx2 != e.x2 || oldy != e.y || oldy2 != e.y2)

from screenshot-capture.

I just pushed the new DPI option to the fix-dpi branch. Let me know what do you think.

from screenshot-capture.

i think the options is good, but you need to let user know they can edit this in option (let they know the extension have option to change some config

from screenshot-capture.

Well, they have to find the options page, there is no other way :) I have outlined how to get to the options page in the extension's description in the chrome store.

What's left is to implement the same option for the Capture Viewport option and then I'm publishing the fix.

Open up another issue for the capture indication overlay and the file name issue if you want.

from screenshot-capture.

The file name is fixed using my solution
On Nov 11, 2016 11:06 PM, "simo" [email protected] wrote:

Well, they have to find the options page, there is no other way :) I have
outlined how to get to the options page in the extension's description in
the chrome store.

What's left is to implement the same option for the Capture Viewport
option and then I'm publishing the fix.

Open up another issue for the capture indication overlay and the file name
issue if you want.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIfvVr1VBPcBI6FhlUz3k8SgpagA3-Ugks5q9ISRgaJpZM4KrMRA
.

from screenshot-capture.

Ok, I'll take a look at it later on.

from screenshot-capture.

Just pushed the fix for the Capture Viewport method to be aware of the new DPI option.

from screenshot-capture.

@simov do you know chrome extension is start to only for chrome OS?
I'm just furious.
https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html

from screenshot-capture.

Chrome Apps not Chrome Extensions

from screenshot-capture.

oh, thank you @simov , you saved my life

from screenshot-capture.

btw I just merged the DPI fix to master and added the file name fix, take a look at it if you want

from screenshot-capture.

it works, but i found some problem, i will open a new issue for this problem

from screenshot-capture.

Ok, I'm closing this one. Thanks for the feedback 👍 I'll think about the overlay too.

from screenshot-capture.

The fixes are published with verison 1.4

from screenshot-capture.