Html2canvas: कैनवास रेंडरिंग रेटिना डिस्प्ले पर धुंधली होती है

को निर्मित 24 मई 2014 · 37टिप्पणियाँ · स्रोत: niklasvh/html2canvas

महान पुस्तकालय के लिए धन्यवाद! एक बात जो मैं देख रहा हूँ, हालांकि यह है कि रेटिना डिस्प्ले का उपयोग करते समय स्क्रीनशॉट धुंधले होते हैं। उदाहरण के लिए, यहाँ https://github.com/niklasvh/html2canvas का स्क्रीनशॉट रेटिना डिस्प्ले (जैसा कि परीक्षण पृष्ठ से लिया गया
screen shot 2014-05-24 at 1 29 51 pm

मुझे लगता है कि शायद कैनवास के प्रतिपादन में window.devicePixelRatio और context.backingStorePixelRatio बीच के अनुपात के लिए एक चेक होना चाहिए ...?

ps यहाँ कुछ उपयोगी लिंक हैं जो मुझे इस मुद्दे की जड़ तक पहुँचाने की कोशिश करते हुए आए थे।

Bug

स्रोत

adilapapaya

सबसे उपयोगी टिप्पणी

जाहिरा तौर पर आप प्रतिपादन के लिए मौजूदा कैनवास का उपयोग कर सकते हैं (जिसे आप रेटिना में प्रदर्शित करने के लिए पूर्व-कॉन्फ़िगर कर सकते हैं)।

उदाहरण:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

MisterLamb 10 अप्रैल 2016

👍34 😄6 ❤3

सभी 37 टिप्पणियाँ

यह पुस्तकालय महान है, लेकिन साथ ही साथ इसका अनुभव भी है। मुझे लगता है कि यह # 379, # 373, # 340, # 203, # 312, और # 158 के रूप में एक ही मुद्दा है और # 390 में उल्लेख किया गया है।

protobi 10 जून 2014

इस पर कोई अपडेट?

manuelpaulo 18 सित॰ 2014

https://github.com/niklasvh/html2canvas/pull/127 धुंधली को ठीक करें

xyxu 26 अक्तू॰ 2014

निश्चित नहीं

syxchina 9 जून 2015

: +1:

YPCrumble 24 जून 2015

+1 कृपया ठीक करें

btm1 24 जून 2015

+1 स्कैलिंग और ज़ूमिंग सीएसएस स्टाइल सही काम नहीं कर रहे हैं? यह HTML लेने के स्क्रीनशॉट को ज़ूम करके हल किया जा सकता है और इसे तेज दिखना चाहिए

hrvolapeter 1 जुल॰ 2015

+1 कृपया ठीक करें

breim 30 जुल॰ 2015

+1 तय

zqcloveping 29 अग॰ 2015

@zqcloveping
भाई, इस विन्यास की कोशिश करो, 100% हल नहीं है लेकिन गुणवत्ता बढ़ जाती है

html2canvas (document.getElementById ('ध्वज'), {
उपयोगकर्ता: सच,
allowTaint: true,
अक्षर: सही,
onrendered: फ़ंक्शन (कैनवास) {
var ctx = कैनवास.getContext ('2d');
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
},
});

breim 29 अग॰ 2015

👍4

@breim
आपकी सहायता के लिए Bro seems 3Q। लेकिन यह कम स्पष्ट प्रतीत होता है। रेटिना उपकरणों में समस्याओं को देखते हुए

zqcloveping 31 अग॰ 2015

कृपया इसे ठीक करे!

vsesh 29 सित॰ 2015

+1 कृपया ठीक करें

nicholasaleks 2 नव॰ 2015

Plz इसे ठीक करें, Orz

wangdahoo 3 फ़र॰ 2016

justiniso 6 अप्रैल 2016

उदाहरण:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

MisterLamb 10 अप्रैल 2016

👍34 😄6 ❤3

@MisterLamb आपका समाधान शानदार ढंग से काम करता है।

pietersv 11 अप्रैल 2016

मुझे भी यह तय कृपया चाहिए

crclayton 26 अप्रैल 2016

Ben07 10 मई 2016

+1 ठीक

T3kstiil3 10 जून 2016

@MisterLamb मैं आपके समाधान की कोशिश कर रहा हूं, लेकिन यह काम करने के लिए प्रतीत नहीं हो सकता। मैंने आपके सुधार के साथ यह फ़ील बनाया है जो कुछ भी नहीं करता है - क्या आप जानते हैं कि मैं क्या गलत कर रहा हूँ? आप फ़िडल में बटन पर क्लिक कर सकते हैं और इसे जाँचने के लिए कई फ़ाइलों को डाउनलोड करने की अनुमति दे सकते हैं और देख सकते हैं कि वे इस कार्यान्वयन में समान हैं।
original
notimproved

YPCrumble 14 जून 2016

@MisterLamb आह सिर्फ 0.5.0-अल्फा 1 में बदल गया और बेहतर काम करता है , धन्यवाद। अपडेट किया गया

YPCrumble 14 जून 2016

❤1 👍1

etoah 3 अग॰ 2016

@MisterLamb एट अल, बस आज की कोशिश की, और यह स्निपेट अब 0.5.0 b4 के साथ काम नहीं करता है - खाली कैनवास प्राप्त करना - और खुद के कैनवास का उपयोग न करने पर सही तरीके से प्रदान किया गया।

संपादित करें: शायद मेरी बग, बदली हुई ठीक है।

संपादन 2: इसे संकीर्ण नहीं कर सका, इस तरह से फिर से लागू किया गया और अब मुझे कुछ दिखाई दे रहा है लेकिन कुछ ऑफसेट के साथ। शायद वहाँ एक शैली कहीं है कि h2c पूरी तरह से समर्थन नहीं करता है और यह परिणाम को गड़बड़ करता है :( मुझे भाग्यशाली है।

3 संपादित करें: हां, ऑफसेट से छुटकारा पाने के लिए इसे डॉक्यूमेंट में ले जाना चाहिए था।

makc 6 नव॰ 2016

👍1

@MisterLamb आप एक वास्तविक प्रतिभा हैं, साझा करने के लिए धन्यवाद ... इसने मेरा दिन बचाया

prometeomcclellan 21 फ़र॰ 2017

@ मिस्टरलम्ब आप सबसे अच्छे you हैं

VarunSK 14 मार्च 2017

@ ममाक मुझे भी! खाली कैनवास प्राप्त करना - और सही ढंग से गाया जाता है यदि स्वयं के कैनवास का उपयोग न करना।

luxueyan 28 अप्रैल 2017

FYI करें - @eKoopmans समाधान परीक्षण में अब तक अच्छी तरह से काम करता है: https://github.com/niklasvh/html2canvas/pull/1087 .. वर्तमान में इसके साथ चल रहा है

seanfuture 31 मई 2017

# 1087 के पक्ष में समापन

niklasvh 27 जुल॰ 2017

@MisterLamb लेकिन छवि के संकल्प में सुधार करने के लिए कैसे ??
जब मैं इस छवि को 96dpi में सहेजने की कोशिश कर रहा हूँ, मुझे 300+ डीपीआई छवि की आवश्यकता है। मैं यह कैसे कर सकता हूं ???

shivtumca12 21 नव॰ 2017

@ shivtumca12 नवीनतम रिलीज़ में, v1.0.0-अल्फा.1 , आप रिज़ॉल्यूशन को बढ़ाने के लिए scale विकल्प का उपयोग कर सकते हैं ( scale: 2 डिफ़ॉल्ट 96dpi से रिज़ॉल्यूशन दोगुना हो जाएगा)।

eKoopmans 7 दिस॰ 2017

👍3

// 90% में ज़ूम करें, html2canvas को कॉल करने से पहले, फिर 100% तक ज़ूम करें।

document.body.style.zoom = '99% ';
html2canvas (document.querySelector ("# content"), {allowTaint: false, widht: _width, height: _height})। फिर (फंक्शन (कैनवास) {

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

augustoice 17 अप्रैल 2018

@MisterLamb आपके समाधान के ऊपर HTML पृष्ठ के ग्रंथों के लिए काम किया गया है। पाठ प्रदर्शित करते समय यह पाठ को शानदार ढंग से रूपांतरित करेगा। लेकिन html पेज की छवि सामग्री (छवि) अभी भी धुंधला के साथ प्रदर्शित हो रही है। कृपया मुझे सलाह दें कि यह कैसे सही हो सकता है।