تبدیل canvas به خروجی عکس

آخرین بروز رسانی: 1403/07/03

    GetExport = (svgId) => {
        let res1 = this.convertSvgToXmlImage(svgId );
        let image = new Image();

        image.onload = function () {
            debugger
            let canvas = document.createElement('canvas');
            canvas.width = parseInt(res1.width);
            canvas.height = parseInt(res1.height);
            let ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);
            let pngData = canvas.toDataURL("image/png");
            let link = document.createElement('a');
            link.download = 'خروجی.png';
            link.href = pngData;
            link.click();
        }
        image.src = res1.xml;
    }
    convertSvgToXmlImage = (svgId) => {
        let chart = document.getElementById(svgId);
        let xml = new XMLSerializer().serializeToString(chart);
        let svg64 = window.btoa(unescape(encodeURIComponent(xml)));
        let b64start = 'data:image/svg+xml;base64,';
        let image64 = b64start + svg64;
        return { xml: image64, width: chart.getAttribute('width'), height: chart.getAttribute('height') };
    }


  GetExportMultiCanvasInOneImg = (chartTitle) => {

        let canvas = document.createElement('canvas');
        let res1 = this.convertSvgToXmlImage('Gauge1_svg');
        let res2 = this.convertSvgToXmlImage('Gauge2_svg');
        let res3 = this.convertSvgToXmlImage('Gauge3_svg');
        canvas.width = parseInt(res1.width) + parseInt(res2.width) + parseInt(res3.width);
        canvas.height = parseInt(res1.height);
        let ctx = canvas.getContext('2d');
        let image = new Image();
        let pass = 1;

        image.onload = function () {

            if (pass == 1) {
                ctx.drawImage(image, 0, 0);
                pass++;
                image.src = res2.xml;
            }
            else if (pass == 2) {
                ctx.drawImage(image, 480, 0);
                pass++;
                image.src = res3.xml;
            }
            else if (pass == 3) {
                ctx.drawImage(image, 960, 0);
                let pngData = canvas.toDataURL("image/png");
                let link = document.createElement('a');
                link.download = chartTitle + '.png';
                link.href = pngData;
                link.click();
            }
        }
        image.src = res1.xml;
    }
  <button className='btn-success'  onClick={() => this.GetExport('chart2')}>
          خروجی تصویر
 </button >

نظرات کاربران

  • 1) سجاد 1400/10/11
    علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    • 1) vahid A 1400/10/11
      @سجاد م است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت
    • 2) سجاد 1400/10/11
      @vahid A ربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
    • 3) vahid A 1400/10/11
      @سجاد مداد رنگی ها مشغول بودند به جز مداد سفید، هیچکس به او کار نمیداد، همه میگفتند : تو به هیچ دردی نمیخوری، یک شب که مداد رنگی ها تو سیاهی شب گم شده بودند، مداد سفید تا صبح ماه کشید مهتاب کشید و انقدر ستاره کشید که کوچک و کوچکتر شد صبح توی جعبه مداد رنگی جای خالی او با هیچ رنگی پر نشد، به یاد هم باشیم شاید فردا ما هم در کنار هم نباشیم…
  • 2) سجاد 1400/10/11
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    • 1) vahid A 1400/10/11
      @سجاد م است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت

نظر دهید

آدرس ایمیل شما منتشر نخواهد شد. فیلدهای الزامی علامت گذاری شده اند *