Jsdom: नकली कैनवास

को निर्मित 22 मार्च 2017 · 25टिप्पणियाँ · स्रोत: jsdom/jsdom

क्या वास्तविक कार्यान्वयन ( canvas / canvas-prebuilt ) के बिना कैनवास का मजाक उड़ाना संभव है?

मैं इस त्रुटि को होने से रोकना चाहता हूं, क्योंकि कैनवास कार्यक्षमता मेरे लिए वास्तव में महत्वपूर्ण नहीं है:

Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

स्रोत

endel

👍3

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

यहाँ कैनवास का मज़ाक उड़ाने का एक आसान तरीका है जिसके साथ मैं आया हूँ:

//
// Mock Canvas / Context2D calls
//
function mockCanvas (window) {
    window.HTMLCanvasElement.prototype.getContext = function () {
        return {
            fillRect: function() {},
            clearRect: function(){},
            getImageData: function(x, y, w, h) {
                return  {
                    data: new Array(w*h*4)
                };
            },
            putImageData: function() {},
            createImageData: function(){ return []},
            setTransform: function(){},
            drawImage: function(){},
            save: function(){},
            fillText: function(){},
            restore: function(){},
            beginPath: function(){},
            moveTo: function(){},
            lineTo: function(){},
            closePath: function(){},
            stroke: function(){},
            translate: function(){},
            scale: function(){},
            rotate: function(){},
            arc: function(){},
            fill: function(){},
            measureText: function(){
                return { width: 0 };
            },
            transform: function(){},
            rect: function(){},
            clip: function(){},
        };
    }

    window.HTMLCanvasElement.prototype.toDataURL = function () {
        return "";
    }
}

const document = jsdom.jsdom(undefined, {
  virtualConsole: jsdom.createVirtualConsole().sendTo(console)
});

const window = document.defaultView;
mockCanvas(window);

endel 18 अक्तू॰ 2017

👍21 🎉8 ❤7 😄6 🚀1

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

अगर किसी को इसकी आवश्यकता है, तो यहां बताया गया है कि मैंने इसे कैसे हल किया:

const utils = require("jsdom/lib/jsdom/utils");
const canvasMock = require("canvas-mock");

function Canvas () {
    canvasMock(this);
    this.toDataURL = function() { return ""; }
}
utils.Canvas = Canvas;

endel 22 मार्च 2017

👍4

कृपया ऐसा न करें। यह भविष्य के पैच रिलीज़ में टूट जाएगा। इसके बजाय, getContext() विधि को ओवरराइड करें, अर्थात window.HTMLCanvasElement.prototype.getContext = ...

domenic 22 मार्च 2017

👍16

धन्यवाद @ डोमिनिक !

endel 23 मार्च 2017

@domenic मैं इसे काम नहीं कर सकता। मेरी ओवरराइड विधि को कॉल नहीं किया जाता है। मैं निम्नानुसार जेस्ट और सेटअप स्क्रिप्ट फ़ाइल का उपयोग करता हूं:

import { jsdom } from 'jsdom';
import mockLocalStorage from './mockLocalStorage';
import jQuery from 'jquery';
import Backbone from 'backbone';
import moment from 'moment';

const dom = jsdom('<!doctype html><html><body></body></html>');
const { window } = dom.defaultView;

function copyProps(src, target) {
    const props = Object.getOwnPropertyNames(src)
        .filter(prop => typeof target[prop] === 'undefined')
        .map(prop => Object.getOwnPropertyDescriptor(src, prop));
    Object.defineProperties(target, props);
}

//Mock canvas (used by qtip)
window.HTMLCanvasElement.prototype.getContext = () => {
    return {};
};

global.window = window;
global.document = window.document;
global.navigator = {
    userAgent: 'node.js',
};
global.localStorage = mockLocalStorage;
global.jQuery = jQuery;
global.$ = jQuery;
global.fetch = () => Promise.resolve();
Backbone.$ = jQuery;
copyProps(window, global);

//Mock Mousetrap (only works in browser)
jest.mock('mousetrap', () => { return { bind: () => {}}});

//Set moment locale for all tests
moment.locale('sv');

नोड में वैश्विक प्रदूषण के लिए खेद है लेकिन यह एक बहुत पुराना और बड़ा कोड आधार है जिसे मैं जेस्ट में माइग्रेट करने का प्रयास करता हूं।
जेस्ट संस्करण: 21.2.1
Jsdom संस्करण: 9.12.0

बहुत अच्छा होगा यदि मॉकिंग कैनवास (विंडोज़ में समर्थित नहीं होने के बाद से कैनवास पैकेज का उपयोग किए बिना) आधिकारिक डॉक्स द्वारा कवर किया गया था और न केवल किसी मुद्दे पर टिप्पणी के रूप में।

cattermo 18 अक्तू॰ 2017

कैनवास पैकेज का उपयोग किए बिना विंडोज़ में समर्थित नहीं होने के कारण

कैनवास-पूर्वनिर्मित आपके लिए एक विकल्प क्यों नहीं है? यही हम अपने प्रोजेक्ट में बिना किसी समस्या के उपयोग कर रहे हैं (विन, मैक और लिनक्स, हालांकि सब कुछ x64 होना चाहिए)।

molant 18 अक्तू॰ 2017

👎4 🎉1 👍1

सामान्य तौर पर हम डॉक्स जोड़ने या एकमुश्त नकली मुद्दों में मदद करने की योजना नहीं बना रहे हैं। हमने इसे https://github.com/tmpvar/jsdom#intervening -before-parsing में सामान्य रूप से कवर किया है और कोई भी विशिष्ट समस्या आपके विशिष्ट कोडबेस से संबंधित होने वाली है।

domenic 18 अक्तू॰ 2017

यहाँ कैनवास का मज़ाक उड़ाने का एक आसान तरीका है जिसके साथ मैं आया हूँ:

//
// Mock Canvas / Context2D calls
//
function mockCanvas (window) {
    window.HTMLCanvasElement.prototype.getContext = function () {
        return {
            fillRect: function() {},
            clearRect: function(){},
            getImageData: function(x, y, w, h) {
                return  {
                    data: new Array(w*h*4)
                };
            },
            putImageData: function() {},
            createImageData: function(){ return []},
            setTransform: function(){},
            drawImage: function(){},
            save: function(){},
            fillText: function(){},
            restore: function(){},
            beginPath: function(){},
            moveTo: function(){},
            lineTo: function(){},
            closePath: function(){},
            stroke: function(){},
            translate: function(){},
            scale: function(){},
            rotate: function(){},
            arc: function(){},
            fill: function(){},
            measureText: function(){
                return { width: 0 };
            },
            transform: function(){},
            rect: function(){},
            clip: function(){},
        };
    }

    window.HTMLCanvasElement.prototype.toDataURL = function () {
        return "";
    }
}

const document = jsdom.jsdom(undefined, {
  virtualConsole: jsdom.createVirtualConsole().sendTo(console)
});

const window = document.defaultView;
mockCanvas(window);

endel 18 अक्तू॰ 2017

👍21 🎉8 ❤7 😄6 🚀1

बहुत - बहुत धन्यवाद! ऐसा लगता है कि कैनवास प्रीबिल्ट पैकेज काम कर रहा है।

cattermo 18 अक्तू॰ 2017

हैलो @ कैटरमो ,
मैंने अपने डिपो में कैनवास-प्रीबिल्ट जोड़ा है, क्या मुझे अपना जेस्ट कॉन्फ़िगरेशन बदलने की ज़रूरत है? मैं इसे काम पर नहीं ला सकता यह मुझे देता है
Not implemented: HTMLCanvasElement.prototype.toBlob (without installing the canvas npm package)

micabe 24 अक्तू॰ 2017

@ मीकाबे
मैंने कोई कॉन्फ़िगरेशन परिवर्तन नहीं किया है। यदि नोड_मॉड्यूल में मौजूद है तो Jsdom कैनवास को पहले से तैयार कर लेगा।

शायद वह विशिष्ट कार्य समर्थित नहीं है?

cattermo 24 अक्तू॰ 2017

👍1

यह अब yarn cache clean बाद काम कर रहा है आपको परेशान करने के लिए क्षमा करें! धन्यवाद @ कैटरमो

micabe 30 अक्तू॰ 2017

शायद जेस्ट-कैनवास-मॉक मदद कर सकता है।

hustcc 1 फ़र॰ 2018

👍21 🎉3 😄2

समाधान सरल है, बस canvas को एक निर्भरता के रूप में स्थापित करें और अपने मज़ाक परीक्षणों को फिर से चलाएँ।

रेफरी: https://github.com/jsdom/jsdom#canvas -support

noscripter 15 अक्तू॰ 2018

👎4 👍4 🚀1 ❤1 😕1 🎉1 😄1

यह अभी भी काम नहीं कर रहा है क्योंकि जिस तरह से jsdom कैनवास मॉड्यूल के लिए lib/jsdom/utils.js पर जाँच करता है:

  exports.Canvas = require(moduleName);
  if (typeof exports.Canvas !== "function") {
    // In browserify, the require will succeed but return an empty object
    exports.Canvas = null;
  }

करना आवश्यकता ('कैनवास') एक ऑब्जेक्ट देता है जिसमें कैनवास फ़ंक्शन होता है। यह सीधे कैनवास फ़ंक्शन को वापस नहीं करता है। या मैं इस मुद्दे पर गलत हूँ? जब मैं कैनवास-प्रीबिल्ट मॉड्यूल का उपयोग कर रहा था तो यह अच्छी तरह से काम करता था, लेकिन ऐसा लगता है कि कैनवास मॉड्यूल में एक अलग एपीआई है। मैं कैनवास के नवीनतम संस्करण 2.0.1 का उपयोग कर रहा हूं।
संपादित करें
मैंने पिछले प्रमुख संस्करण (1.6.x) का परीक्षण किया और यह ठीक काम करता है, यह एक एपीआई परिवर्तन है जिसका JSDOM इलाज नहीं कर रहा है।

viniciusd 25 अक्तू॰ 2018

👍5

आप बस कर सकते हैं:

HTMLCanvasElement.prototype.getContext = jest.fn()

यदि वास्तविक कार्यान्वयन आपके लिए महत्वपूर्ण नहीं है

YevgenSnuffkin 26 नव॰ 2018

👍14 ❤5 🚀1

यह अभी भी काम नहीं कर रहा है क्योंकि जिस तरह से jsdom कैनवास मॉड्यूल के लिए lib/jsdom/utils.js पर जाँच करता है:
  exports.Canvas = require(moduleName);
  if (typeof exports.Canvas !== "function") {
    // In browserify, the require will succeed but return an empty object
    exports.Canvas = null;
  }
करना आवश्यकता ('कैनवास') एक ऑब्जेक्ट देता है जिसमें कैनवास फ़ंक्शन होता है। यह सीधे कैनवास फ़ंक्शन को वापस नहीं करता है। या मैं इस मुद्दे पर गलत हूँ? जब मैं कैनवास-प्रीबिल्ट मॉड्यूल का उपयोग कर रहा था तो यह अच्छी तरह से काम करता था, लेकिन ऐसा लगता है कि कैनवास मॉड्यूल में एक अलग एपीआई है। मैं कैनवास के नवीनतम संस्करण 2.0.1 का उपयोग कर रहा हूं।
संपादित करें
मैंने पिछले प्रमुख संस्करण (1.6.x) का परीक्षण किया और यह ठीक काम करता है, यह एक एपीआई परिवर्तन है जिसका JSDOM इलाज नहीं कर रहा है।

मेरी भी यही समस्या है। ऐसा लगता है कि समस्या jsdom के साथ नहीं है क्योंकि फिक्स को कुछ समय पहले https://github.com/jsdom/jsdom/pull/1964 में मर्ज कर दिया गया था और संस्करण 13 बाद से उपलब्ध है।
हालांकि, jsdom संस्करण jest-environment-jsdom में अभी भी ^11.5.1 पर अटका हुआ है और मेरा मानना है कि यह समस्या पैदा कर रहा है:
https://github.com/facebook/jest/blob/2e2d2c8dedb76e71c0dfa85ed36b81d1f89e0d87/packages/jest-environment-jsdom/package.json#L14

paradite 29 जन॰ 2019

कैनवास स्थापित किए बिना, या कैनवास- प्रीबिल्ट HTMLCanvasElement से संबंधित त्रुटियों से छुटकारा पाने में सक्षम था, साथ ही इस समस्या को हल करने के लिए @endel द्वारा हैक के रूप में प्रस्तावित किसी भी अन्य कैनवास विधियों से छुटकारा पाने में सक्षम था। जैसा कि @hustcc ने प्रस्तावित किया था, काफी साफ समाधान खोजने के साथ जेस्ट-कैनवास-मॉक का इस्तेमाल किया। तकनीकी विवरण के लिए कृपया इस टिप्पणी पर एक नज़र डालें।

danieldanielecki 1 मार्च 2019

मैं "वेबकिट नहीं पढ़ सकता" जैसे संदेश देख रहा थाबैकिंगस्टोरPixelRatio of null", साथ ही साथ "
लागू नहीं किया गया: HTMLCanvasElement.prototype.getContext (कैनवास npm पैकेज स्थापित किए बिना)", और कैनवास (-prebuilt) स्थापित करना पर्याप्त नहीं था। मैं package-lock.json के अंदर गया, jsdom 13 को इंगित करने के लिए jest-environment-jsdom को ठीक किया , नोड_मॉड्यूल्स को फेंक दिया, और फिर से एनपीएम इंस्टॉल किया। त्रुटि संदेश चले गए। मुझे लगता है कि @paradite सही है, और मजाक के खिलाफ एक टिकट खोला:

https://github.com/facebook/jest/issues/8016

grtjn 1 मार्च 2019

फीडबैक मिला। यह पुराने नोड संस्करणों के साथ अटके हुए मजाक से संबंधित है। यदि आपको नवीनतम नोड के लिए समर्थन की आवश्यकता है, तो यहां देखें: https://www.npmjs.com/package/jest-environment-jsdom-thirteen। हालांकि यह मज़ाक विशिष्ट है, इसलिए शायद यहाँ थोड़ा सा विषय है। भावी पीढ़ी के लिए किसी भी तरह साझा करना..

grtjn 1 मार्च 2019

@grtjn - जेस्ट-एनवायरनमेंट- jsdom- तेरह निर्भरता की जाँच की, लेकिन मेरे मामले में मुझे अभी भी ये 2 बिल्कुल वैसी ही त्रुटियाँ मिली हैं

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
TypeError: Cannot read property 'fillRect' of null

पहले बताए गए मेरे समाधान को ध्यान में रखते हुए, नोड संस्करण के बारे में मैं यह नहीं कहूंगा कि 10.15 एक पदावनत है, क्योंकि मुझे ऐसे वातावरण के लिए समस्याएँ मिली हैं

Angular CLI: 7.2.4
Node: 10.15.0
OS: win32 x64
Angular: 7.2.4

danieldanielecki 4 मार्च 2019

एफवाईआई: मुझे अपने जेस्ट कॉन्फ़िगरेशन में "testEnvironment": "jest-environment-jsdom-thirteen" जोड़ना पड़ा, और कैनवास पैकेज, साथ ही काहिरा ओएस टूलसेट स्थापित करना पड़ा। कैनवास-प्रीबिल्ट मेरे लिए काम नहीं कर रहा था। मैं वू का उपयोग कर रहा हूँ।

grtjn 5 मार्च 2019

👍3

काहिरा ओएस टूलसेट निर्भरता से लिंक करें? वह नहीं मिला।

danieldanielecki 8 मार्च 2019

@danieldanielecki 'कैनवास' पैकेज का मुख्य पृष्ठ देखें: https://www.npmjs.com/package/canvas#compiling

grtjn 10 मार्च 2019

👍1

@grtjn इसके लिए धन्यवाद - शायद किसी बिंदु पर इसका लाभ

danieldanielecki 10 मार्च 2019

नेक्रोपोस्ट के लिए क्षमा करें, लेकिन @grtjn jest-environment-jsdom-

cmdcolin 21 जून 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Jsdom: नकली कैनवास

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

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

संबंधित मुद्दों