mycurelabs / vue-html2canvas Goto Github PK

View Code? Open in Web Editor NEW

116.0 4.0 23.0 830 KB

Vue mixin for Html2Canvas

License: MIT License

JavaScript 100.00%

html2canvas vue-mixin hacktoberfest javascript

vue-html2canvas's People

Contributors

Stargazers

Watchers

vue-html2canvas's Issues

Create an interactive single page demo site.

Must be created with vuejs and this plugin.

this.$html2canvas function cannot do parallel at the same time.

Currently, we do call asynchronous this.$html2canvas with multiple times. It cannot do parallel but by sequence.
So it be good if we can do parallel for best performance in loop.

Syntax Error: SyntaxError: .../src/views/Page.vue: await is a reserved word

Hey mate.

I am having trouble getting past the error on this line from your example.
'this.output = await this.$html2canvas(el, options)'

The error is
Syntax Error: SyntaxError: .../src/views/Page.vue: await is a reserved word

Any ideas on how I can fix this?

Thanks in advance!
Zac

Getting black frames as output

I am capturing my web-cam stream from a VUE extention of video-js called VideoJSRecord.vue. I am also using html2canvas to render the web-cam stream to an image. The issue is that I am able to get the frame of the video player (that shows record button and symbol) but the actual web-stream is missing and its all black.

async print() {
            const el = this.$refs.printMe.$el
            const options = {
                type: 'dataURL',
            }
           this.output = await this.$html2canvas(el, options)
           console.log(this.output)
        },

<div
                    class="video-record"
                    :class="
                        showVideo == true
                            ? 'videoRecored'
                            : '' || timeShow == true
                            ? 'videoRecored'
                            : ''
                    "
                >
                    <div class="show-record-video">
                        <video-js-record
                            ref="printMe"
                            @recordingStarted="onVideoRecording"
                            @recordingEnded="onRecordingEnded"
                        ></video-js-record>
                    </div>
                    <div
                        :class="showVideo == true ? 'video-recorded' : ''"
                        class="video-play"
                        ref="printMe"
                    >
                        <span v-if="timeShow" class="timer-countdown">{{
                            countDown
                        }}</span>
                        <i class="icon-record">
                            <i class="path1"></i>
                            <i class="path2"></i>
                            <i class="path3"></i>
                        </i>
                        <p v-if="showVideo == false">Record</p>
                        <p v-if="showVideo == true">Finish</p>
                    </div>
</div>

Here is the output image that is generated after decoding the base64 output.

Render quality issue

Hi, I'm using this package to render some barcodes and I have an issue that doesn't make much sense to me.

I'm able to save my barcode on Mac os (Main Display) and it looks like this. Crisp and good quality.

but when I move my browser to an external display it renders it in low quality even tho it is full screen on both screens and elements are fully visible and crisp on both screens.

I'm not sure how to tackle this problem. Does anyone know what could go wrong and how to have it consistent?

This is my template:

   <div ref="printMe">
        <barcode
          height="50"
          width="1"
          :value="barcodeValue"
          :display-value="displayValue"
          format="code39"
          background="transparent"
          lineColor="black"
        >
        <!-- It is not loading -->
        Please insert CODE39 barcode
      </barcode>
   </div>

and script:

async print() {
        const el = this.$refs.printMe;
        // add option type to get the image version
        // if not provided the promise will return
        // the canvas.
        const options = {
          type: "dataURL",
          // useCORS: true
          imageSmoothingEnabled: false
        };
        this.output = await this.$html2canvas(el, options);
        let a = document.createElement("a");
        a.href = this.output;
        a.download = `${this.barcodeValue}`;
        a.click();
        a.remove();
      },

Thank you!

Update docs

Find anything to update in the docs

how to get toDataURL?

Hi) Please tell me, how to get toDataURL?
this.$html2canvas(el, options).then(output => {
//get toDataURL()
}).catch(error => console.error(error));

Thank you!

Inaccurate image output in built code on Chrome, FireFox

In a vue-cli generated project, when running in development the target image is accurate accross browsers, however built code is inaccurate across Firefox and Chrome (works in Safari)

Note: the image below is table-less; the bordered elements on the right side of the image are css-defined rows + columns

Example accurate output (top is image output, bottom is HTML element):

Inaccurate output, after NPM Run Build:

Using with vue-grid-layout

Set false to use-css-transforms prop.

html
:use-css-transforms='true'
:use-css-transforms='false'

Passing parameters to canvas.toDataURL() method for Image format and Quality

Would it be possible for you to expose two optional parameters for image format and image quality? By default empty method exposes png files which can be huge. It would be nice for us to provide those in options during function call instead of getting canvas and try to manipulate it.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

canvas.toDataURL(type, encoderOptions);

type Optional
A DOMString indicating the image format. The default format type is image/png.
encoderOptions Optional
A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.
If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.

Uncaught SyntaxError: The requested module does not provide an export named 'default'

hi
i have this issue when I try to import in js file

<script type="module">
    import VueHtml2Canvas from 'node_modules/vue-html2canvas/dist/index.js';
</script>

i see

Uncaught SyntaxError: The requested module does not provide an export named 'default'

Uncaught ReferenceError: regeneratorRuntime is not defined

I get this error in console after adding

import Vue from 'vue';
import VueHtml2Canvas from 'vue-html2canvas';

Vue.use(VueHtml2Canvas);

into main.js

Does it support iframe screenshots?

Unable to load images

hello

i'm trying to use vue-html2canvas but for some reason it s not able to load images

note: i have this as options

const options = {
        type: 'dataURL',
        backgroundColor: 'red',
        allowTaint: true,
        width: '256px',
        height: '512px',
        imageTimeout: 0,

      }

Console output:

0ms html2canvas: html2canvas $npm_package_version
1848ms html2canvas: Document cloned, using computed rendering
1849ms html2canvas: Starting node parsing
1854ms html2canvas: Added image https://www.lesroyaumes.com/images/personnages_midas/hommes/corps/[email protected]
1856ms html2canvas: Added image https://lesroyaumes.cdn.oxv.fr/images/personnages_midas/hommes/corps/[email protected]
1860ms html2canvas: Added image 
1892ms html2canvas: Finished parsing node tree
1928ms html2canvas: Unable to load image Event {isTrusted: true, type: "error", target: img, currentTarget: img, eventPhase: 2, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: [img]returnValue: truesrcElement: nulltarget: nulltimeStamp: 20608.655type: "error"__proto__: Event
2038ms html2canvas: Finished loading 3 images (3) [img, img, null]
2039ms html2canvas: Starting renderer
2041ms html2canvas: Canvas renderer initialized (541x0 at 1708.4635009765625,116.97915649414062) with scale 0.6000000238418579
2054ms html2canvas: Render completed

can you please take a look?
source code

increase image quality

hello, thanks for your plugin, is there a way to increase image quality?

Unhandled promise rejection TypeError: "A is undefined"

My method :

async print() {
            const el  = this.$refs.printMe;

            const options = {
                type: 'dataURL'
            }

            this.output = await this.$html2canvas(el);

            console.log(this.output);
        },

When print function is executed :

Unhandled promise rejection TypeError: "A is undefined"

Package.json :

{
    "scripts": {
        "serve": "vue-cli-service serve --open",
        "build": "vue-cli-service build",
        "e2e": "node test/e2e/runner.js",
        "lint": "vue-cli-service lint",
        "dev": "vue-cli-service serve --open",
        "lint-fix": "vue-cli-service lint --fix"
    },
    "dependencies": {
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "chart.js": "^2.7.3",
        "npm": "^6.9.0",
        "qrcode": "^1.3.3",
        "register-service-worker": "^1.5.2",
        "v-dialogs": "^2.0.3",
        "vue": "^2.6.6",
        "vue-chartjs": "^3.4.0",
        "vue-color": "^2.7.0",
        "vue-cookies": "^1.5.13",
        "vue-draggable-resizable": "^2.0.0-rc1",
        "vue-html2canvas": "0.0.4",
        "vue-i18n": "^8.8.1",
        "vue-router": "^3.0.2",
        "vue-router-prefetch": "^1.4.0",
        "vue-select": "^3.1.0",
        "vue2-datepicker": "^2.11.0",
        "vue2-transitions": "^0.2.3",
        "vuejs-uploader": "^0.6.5"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.4.0",
        "@vue/cli-plugin-eslint": "^3.4.0",
        "@vue/cli-plugin-pwa": "^3.4.0",
        "@vue/cli-service": "^3.4.0",
        "node-sass": "^4.12.0",
        "sass-loader": "^7.1.0",
        "vue-cli-plugin-i18n": "^0.5.1",
        "vue-template-compiler": "^2.6.6"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 11"
    ]
}

how to set imageSmoothingEnabled = false?

Hi, I just wanna know how we can set imageSmoothingEnabled = false? My image contains barcode and i dont want it to be smooth i need it to be crisp as possible.

Thank you.

Mobile rendering

Greetings.

I´m trying to render a responsive component and the results are a little different from the ones I was expecting.

Isn't the option 'windowWidth' created to make rendering independant of the real screen resolution? It doesn't matter what value I set in this option, the result seems always related to the current "window.innerWidth" of the browser.

It's important to say that the component I´m rendering is a card from https://vuematerial.io/.

Here are the options I´m using:

const html2CanvasOptions = {
type: 'dataURL',
scale: 1,
windowWidth: 1362 // or '1362px' , it doesn't seems to change anything
};

mycurelabs / vue-html2canvas Goto Github PK

vue-html2canvas's People

Contributors

Stargazers

Watchers

Forkers

vue-html2canvas's Issues

My method :

When print function is executed :

Package.json :

Recommend Projects

Recommend Topics

Recommend Org