使用 jspdf 将图像 url 转换为 pdf

2024-03-22

function convertImgToBase64(url)
{
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    img = document.createElement('img'),
    img.src = url;
    canvas.height = img.height;
    canvas.width = img.width;
    var dataURL = canvas.toDataURL('image/jpeg')
    alert(dataURL);
    canvas = null; 
    return dataURL;
  }

var imageurl = 'http://qph.is.quoracdn.net/main-qimg-ca033a73e2ea858908c44905d4c25f4b?convert_to_webp=true';
var som =convertImgToBase64(imageurl);
doc.addImage(som, 'JPEG', 15, 40, 180, 180);
doc.output('datauristring');

但没有任何反应,没有生成 pdf?我在警报框中获得了正确的 Base64 代码,但未生成图像?


这是我对同一问题的解决方案。

let logo = null;

getDataUri(imgUrl, function(dataUri) {
    logo = dataUri;
    console.log("logo=" + logo);
});

function getDataUri(url, cb)
 {
        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain

        image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight; 

            //next three lines for white background in case png has a transparent background
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#fff';  /// set white fill style
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            canvas.getContext('2d').drawImage(this, 0, 0);

            cb(canvas.toDataURL('image/jpeg'));
        };

        image.src = url;
   }

然后生成pdf

    var doc = new jsPDF();

    let left = 15;
    let top = 8;
    const imgWidth = 100;
    const imgHeight = 100;

    doc.addImage(logo, 'PNG', left, top, imgWidth, imgHeight);

    doc.output('dataurlnewwindow'); //opens pdf in new tab
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jspdf 将图像 url 转换为 pdf 的相关文章

  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • 如何按照编写的顺序迭代 javascript 对象属性

    我发现了代码中的一个错误 我希望通过最少的重构工作来解决该错误 此错误发生在 Chrome 和 Opera 浏览器中 问题 var obj 23 AA 12 BB iterating through obj s properties for
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案?

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • 在闪亮的数据表中为每个单元格显示工具提示或弹出窗口?

    有没有什么方法可以为 r闪亮数据表中的每个单元格获取工具提示 有很多方法可以获取悬停行或列 但我找不到一种方法来获取行和列索引并为每个单元格显示不同的悬停工具提示 任何人都可以修改以下代码吗 library shiny library DT
  • iOS7 中“-webkit-overflow-scrolling: touch” 最初的屏幕外元素被破坏

    既然转基因种子已经发布了 我们现在可以谈谈了 看起来 iOS7 中的 webkit overflow scrolling touch 已损坏 最初不在屏幕上的元素的触摸事件不会触发 或者在某些情况下只是不可靠 这是一个例子
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 使用异步调用时如何从 javascript 更新元刷新?

    我有一个系统 它使用元刷新来注销页面 该系统会在空闲用户后进行清理 不用担心 服务器也会导致会话超时 我开始通过 ajax 进行一些操作 不是真正的 xml 但这不是重点 我可以运行从异步请求返回的javascript 所以我想知道是否可以
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式

随机推荐

  • 从测试用例设置 TestNG 超时

    我见过很多类似的例子 Test timeOut 1000 是否可以在测试用例中覆盖超时值 如果是这样 怎么办 我的问题是测试用例的执行时间由传递给测试用例的参数控制 有时测试用例需要一小时 有时需要很多天 我想相应地设置超时 这是可能的 但
  • 如何解决 SAM Docs 中的循环依赖关系,同时将 API 端点放入 lambda 函数的环境变量中

    AWSTemplateFormatVersion 2010 09 09 Transform AWS Serverless 2016 10 31 Description hello Resources ApiGatewayApi Type A
  • 为什么 webpack 2 包使用 `eval()` 来包装代码?

    我刚刚学习webpack 我注意到在生成的bundle js中它使用了这样的eval 当处于 开发 模式 而不是 生产 模式时 它会产生完全不同的东西 function module exports webpack require use
  • Viewstate - 完全混乱。

    这让我完全困惑 有人能解释一下吗 Markup
  • Android SDK 管理器中未显示其他 Android API

    我安装了安卓SDK管理器两个月前 我拿到安卓2 3 3 SDK安装了 但我不太记得我遵循的步骤 因为我是 Android 开发新手 现在 当我打开 Android SDK 管理器时 我只看到 SDK平台Android 2 3 3 我看不到我
  • 将分配给 Fortran 数组的 C_PTR 传递给 C

    我在访问 C 中的数组时遇到段错误 该数组在下面的 Fortran 文件中分配 有一些调试问题 例如文件写入没有写入任何有意义的内容 并且我初始化了一个变量i我从来没有用过 但是 我发现了以下内容 未初始化i 但仍然声明 没有段错误 未在
  • 是否可以从 DataContext.ExecuteQuery 返回匿名对象的 IEnumerable?

    我开发了一个报告引擎 其中报告基于模板 每个模板都有带有 SQL 查询的字符串 每个报告都有 SQL 查询参数的特定值 为了呈现报告 我设置参数并调用数据上下文 执行查询 http msdn microsoft com en us libr
  • npm start 上的 webpack-dev-server 错误

    我正在尝试在 ng2 admin 上运行 npm start 一切正常 直到我执行 npm update 来尝试更新软件包 之后 npm 启动并出现错误 webpack dev server config config webpack de
  • 从 Android WebView 中启动地图

    我有一个 Android 应用程序 它在 WebView 中显示内容 其中包含一个应该打开地图的链接 我有要链接的位置的纬度 经度和街道地址 但我不确定链接的正确格式 大约一周时间没有收到社区对此的任何答复或评论 最后我只是选择 http
  • D3D11 不知从何增加了引用计数?

    我已经使用 d3d11 有一段时间了 在发现 directx 调试器之后 我最近发现我的程序从所有未正确释放的 com 对象中到处泄漏内存 经过一番窥探和盯着代码几个小时后 我开发了一些方法来隔离引用计数意外增加的位置 首先 所有对象都被包
  • 在数据库中存储 JS 数组和对象

    我有一个应用程序 可以让用户用 JS 构建东西 我希望用户能够保存其工作的当前状态以重用或共享它 但他拥有的是存储在 JS 数组中的 JS 对象的集合 具有非常不同的属性 颜色 标签 x y 位置 大小等 SQL 对于该特定任务来说似乎很糟
  • Jenkins:Git 推送将触发仅针对该分支的 Jenkins 构建

    我们正在多个 Git 分支上并行工作 当推送特定的 Git 分支时 我们如何启动 Jenkins 项目 作业来触发该特定分支的构建 举个例子 我们推送一个 Git 分支 feature abc gt 这应该会触发使用 拉动该分支 featu
  • 我可以阻止 numpy.array 将元素转换为 numpy 数组吗?

    我正在尝试将以下内容转换为间隔对象的 2x2 numpy 数组 from interval import interval from the pyinterval package import numpy as np np array in
  • 在循环内附加到 numpy 数组

    我真的希望没有遗漏一些东西 之前已经澄清过 但我在这里找不到东西 这个任务看起来很简单 但我失败了 我想在 for 循环中连续将一个 numpy 数组附加到另 一个数组 step n 10 steps np empty step n 1 f
  • 如何将 groovy 变量传递给 shell 块 jenkins

    我有一个常规变量 我想将其传递给 shell 块以进行进一步处理 但我不断收到粘贴在下面的错误 stages stage First Stage echo out available variables steps script def s
  • 有什么方法可以在免费的heroku dyno上添加免费的SSL证书吗?

    我有一个 heroku 免费计划 它在带有 PointDNS 附加组件的自定义域上运行 因此它可以为 DNS 提供商提供名称服务器 如果这很重要 我已在我的自定义域 https 上启动并运行该网站 但 ssl 证书指向 herokuapp
  • 将引导面板宽度设置为文本宽度

    我是 HTML Bootstrap 新手 所以也许这相当简单 How do you set the panel width引导面板 http getbootstrap com components panels其文本的长度 如果面板无法实现
  • wsdl2py 复杂类型

    如何向 SOAP 请求添加复杂类型 我正在使用 WSDL2py 生成的请求 并尝试使用它在 types py 文件中创建的其他 TypeDefinitions 例如 AccountInfo 用于身份验证 它会进入每个请求 然后将其传递给 w
  • 基于 webkit 的浏览器将 json 解释为脚本

    我只是尝试通过 js 获取我的 Zootool 项目 将它们推送到我的博客页脚中 但没有成功 这是我使用的代码 jquery框架 jQuery document ready function first try var url http z
  • 使用 jspdf 将图像 url 转换为 pdf

    function convertImgToBase64 url var canvas document createElement canvas var ctx canvas getContext 2d img document creat